/**
 * Locations Page Styles
 * 
 * Follows BEM naming convention and mobile-first responsive design
 * Consistent with the Three Guys brand style
 * Inspired by Boba Tigers multi-location design
 */

/* ===========================
   LOCATIONS SECTION
   =========================== */

.locations-section {
  padding: 60px 20px 80px;
  background-color: #fff;
}

.locations-header {
  text-align: center;
  margin-bottom: 70px;
}

.locations-subtitle {
  color: var(--primary-color, #FF7A00);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.locations-title {
  color: var(--secondary-color, #1A1A1A);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

#locations-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 50px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ===========================
   LOCATION CARD
   =========================== */

.location-card {
  background: #ffffff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  border: none;
  max-width: 365px;
  width: 100%;
}

/* ===========================
   LOCATION IMAGE
   =========================== */

.location-image-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.location-image {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #f5f5f5;
  transition: transform 0.3s ease;
}

.location-image-link:hover .location-image {
  transform: scale(1.02);
}

.location-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.location-image-link:hover .location-image img {
  transform: scale(1.05);
}

.featured-badge {
  display: none;
}

/* ===========================
   LOCATION CONTENT
   =========================== */

.location-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  flex: 1;
}

.location-info {
  padding: 35px 0px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.location-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.location-name {
  color: #000000;
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  text-align: left;
}

.location-address {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

/* ===========================
   LOCATION DETAILS
   =========================== */

.location-details {
  display: none;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #444444;
  font-size: 0.938rem;
  line-height: 1.6;
}

.detail-item ion-icon {
  font-size: 18px;
  color: var(--primary-color, #FF7A00);
  flex-shrink: 0;
  margin-top: 3px;
}

.detail-item a {
  color: #444444;
  text-decoration: none;
  transition: color 0.3s ease;
}

.detail-item a:hover {
  color: var(--primary-color, #FF7A00);
}

.detail-item.hours {
  align-items: flex-start;
}

.hours-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hours-info p {
  margin: 0;
  line-height: 1.6;
}

/* ===========================
   LOCATION ACTIONS (Buttons)
   =========================== */

.location-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}

.location-btn {
  text-align: center;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
  color: #000000;
  letter-spacing: 0.3px;
  border: none;
}

/* Override default button text span styling */
.location-btn .text {
  position: relative;
  color: inherit;
}

.location-btn .text-2 {
  position: absolute;
  opacity: 0;
}

/* Order Now Button */
.location-actions .btn-primary {
  background-color: transparent;
  color: #000000 !important;
  border: 2px solid #000000;
  transition: all 0.3s ease;
}

.location-actions .btn-primary .text,
.location-actions .btn-primary .text-1 {
  color: #000000 !important;
}

.location-actions .btn-primary:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000000;
}

.location-actions .btn-primary:hover .text,
.location-actions .btn-primary:hover .text-1,
.location-actions .btn-primary:hover span {
  color: #000 !important;
}

/* Book A Table Button */
.btn-book-table {
  background-color: transparent !important;
  color: #000000 !important;
  border: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  padding: 10px 22px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  border-radius: 50px;
  text-align: center;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
}

.btn-book-table:hover {
  background-color: transparent !important;
  color: #000000 !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: none !important;
}

.btn-book-table .text,
.btn-book-table .text-1,
.btn-book-table span {
  color: #000000 !important;
  transition: none !important;
  position: relative;
}

.btn-book-table:hover .text,
.btn-book-table:hover .text-1,
.btn-book-table:hover span {
  color: #000000 !important;
  transition: none !important;
}

/* ===========================
   LOCATION SOCIAL
   =========================== */

.location-social {
  display: none;
}

.location-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color, #FF7A00);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.3s ease;
}

.location-social a:hover {
  background-color: var(--secondary-color, #1A1A1A);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.location-social ion-icon {
  font-size: 18px;
}

/* ===========================
   LOCATION MAP (Hidden in card, shown in expanded view)
   =========================== */

.location-map {
  display: none;
}

/* ===========================
   RESPONSIVE LAYOUT
   =========================== */

/* Mobile - Default styles for small screens */
@media (max-width: 575px) {
  .locations-header {
    margin-bottom: 45px;
  }

  .locations-subtitle {
    font-size: 0.938rem;
  }

  .locations-title {
    font-size: 2.75rem;
  }

  .locations-section {
    padding: 40px 15px 60px;
  }
}

/* Mobile landscape and small tablets */
@media (min-width: 576px) {
  .location-image {
    height: 500px;
  }
  
  .location-actions {
    gap: 14px;
  }

  .locations-subtitle {
    font-size: 1.125rem;
  }

  .locations-title {
    font-size: 3.5rem;
  }
}

/* Tablet - 2 column grid */
@media (min-width: 768px) {
  #locations-container {
    gap: 50px;
  }

  .location-image {
    height: 500px;
  }

  .location-info {
    padding: 30px 0px 28px;
  }

  .location-name {
    font-size: 1.5rem;
  }

  .location-address {
    font-size: 16px;
  }

  .locations-subtitle {
    font-size: 1.25rem;
  }

  .locations-title {
    font-size: 4.5rem;
  }

  .locations-header {
    margin-bottom: 65px;
  }
}

/* Desktop - 3 columns in one row */
@media (min-width: 1024px) {
  .locations-section {
    padding: 80px 30px 100px;
  }

  #locations-container {
    gap: 3px;
    padding: 0 20px;
  }

  .location-image {
    height: 500px;
  }

  .location-info {
    padding: 32px 0px 28px;
  }

  .location-name {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }

  .location-address {
    font-size: 16px;
  }

  .location-btn {
    padding: 10px 22px;
    font-size: 14px;
  }

  .locations-subtitle {
    font-size: 1.25rem;
  }

  .locations-title {
    font-size: 5rem;
  }

  .locations-header {
    margin-bottom: 70px;
  }
}

/* Large desktop - maintain 3 columns */
@media (min-width: 1200px) {
  #locations-container {
    gap: 50px;
  }

  .location-image {
    height: 500px;
  }

  .location-info {
    padding: 35px 0px 30px;
  }

  .location-name {
    font-size: 1.625rem;
  }

  .location-address {
    font-size: 16px;
  }

  .location-btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}

/* Extra large screens */
@media (min-width: 1400px) {
  .location-image {
    height: 500px;
  }

  .location-info {
    padding: 38px 0px 32px;
  }
}

/* ===========================
   ANIMATION & TRANSITIONS
   =========================== */

@media (prefers-reduced-motion: no-preference) {
  .location-card {
    animation: fadeInUp 0.6s ease-out;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stagger animation for multiple cards */
  .location-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .location-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  .location-card:nth-child(3) {
    animation-delay: 0.3s;
  }
}

/* ===========================
   ACCESSIBILITY
   =========================== */

/* Focus states */
.location-actions a:focus-visible,
.location-social a:focus-visible,
.detail-item a:focus-visible {
  outline: 3px solid var(--primary-color, #FF7A00);
  outline-offset: 3px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .location-card {
    border: 2px solid var(--text-color, #222222);
  }

  .featured-badge {
    border: 2px solid #ffffff;
  }
}

/* Print styles */
@media print {
  .location-actions,
  .location-social {
    display: none;
  }

  .location-card {
    box-shadow: none;
    border: 1px solid #000000;
    page-break-inside: avoid;
  }

  .location-map {
    height: 300px;
  }
}