/* ============================================
   HOME — VISIT US / LOCATION TEASER
   PREMIUM LOCATION SECTION
   ============================================ */

.visit-section {
  position: relative;

  /* Different from previous white/card sections */
  background:
    linear-gradient(
      135deg,
      #fff0df 0%,
      #ffe4cf 48%,
      #fff7ed 100%
    );

  overflow: hidden;
}


/* ============================================
   DECORATIVE BACKGROUND
   ============================================ */

.visit-section::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  top: -180px;
  right: -120px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(215, 25, 32, 0.10),
      transparent 70%
    );

  pointer-events: none;
}


.visit-section::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  bottom: -150px;
  left: -100px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(242, 140, 24, 0.14),
      transparent 70%
    );

  pointer-events: none;
}


/* ============================================
   MAIN CONTAINER
   ============================================ */

.visit-section .container {
  position: relative;

  z-index: 2;

  display: grid;

  gap: 38px;

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid rgba(255, 255, 255, 0.95);

  border-radius:
    var(--radius-lg);

  padding:
    40px;

  box-shadow:
    0 22px 60px rgba(80, 35, 10, 0.12);

  backdrop-filter:
    blur(8px);
}


/* ============================================
   VISIT INFORMATION
   ============================================ */

.visit-info {
  display: flex;

  flex-direction: column;

  justify-content: center;
}


/* ============================================
   SECTION EYEBROW
   ============================================ */

.visit-info .eyebrow-tag {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  margin-bottom: 12px;

  padding: 7px 13px;

  color: #8e1319;

  background:
    rgba(215, 25, 32, 0.08);

  border:
    1px solid rgba(215, 25, 32, 0.14);

  border-radius:
    999px;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* ============================================
   LOCATION HEADING
   ============================================ */

.visit-info h2 {
  margin: 0;

  color:
    var(--ink);

  font-family:
    var(--font-display);

  font-size:
    clamp(2rem, 4vw, 3.4rem);

  line-height: 1.02;

  letter-spacing: -0.025em;
}


.visit-info h2 span {
  display: block;

  color:
    var(--flame);
}


/* ============================================
   INTRO TEXT
   ============================================ */

.visit-description {
  max-width: 560px;

  margin-top: 15px;

  color:
    var(--text-muted);

  font-size:
    0.95rem;

  line-height:
    1.7;
}


/* ============================================
   INFORMATION LIST
   ============================================ */

.visit-info-list {
  display: flex;

  flex-direction: column;

  gap: 15px;

  margin-top: 27px;
}


/* ============================================
   INFORMATION ITEM
   ============================================ */

.visit-info-item {
  display: flex;

  gap: 15px;

  align-items: flex-start;

  padding:
    14px 15px;

  background:
    rgba(255, 255, 255, 0.88);

  border:
    1px solid rgba(142, 19, 25, 0.08);

  border-radius:
    15px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}


.visit-info-item:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(215, 25, 32, 0.20);

  box-shadow:
    0 10px 28px rgba(80, 35, 10, 0.08);
}


/* ============================================
   ICON CIRCLE
   ============================================ */

.visit-info-item .icon-circle {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #d71920,
      #f28c18
    );

  color:
    #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 18px;

  box-shadow:
    0 8px 20px rgba(215, 25, 32, 0.18);
}


/* ============================================
   INFORMATION TEXT
   ============================================ */

.visit-info-item strong {
  display: block;

  color:
    var(--ink);

  margin-bottom:
    3px;

  font-size:
    0.92rem;

  font-weight:
    800;
}


.visit-info-item span,
.visit-info-item a {
  display: inline-block;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.55;

  text-decoration:
    none;
}


.visit-info-item a {
  transition:
    color 0.2s ease;
}


.visit-info-item a:hover {
  color:
    var(--flame);
}


/* ============================================
   ACTION BUTTONS
   ============================================ */

.visit-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top:
    23px;
}


.visit-actions .btn {
  min-height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    11px 19px;
}


/* ============================================
   MAP WRAPPER
   ============================================ */

.visit-map {
  position: relative;

  min-height:
    330px;

  overflow: hidden;

  border:
    7px solid #ffffff;

  border-radius:
    var(--radius-md);

  background:
    #eadfd3;

  box-shadow:
    0 18px 45px rgba(55, 25, 8, 0.14);
}


/* ============================================
   MAP TOP LABEL
   ============================================ */

.visit-map::before {
  content:
    "FIND US";

  position: absolute;

  z-index: 3;

  top: 15px;
  left: 15px;

  padding:
    7px 11px;

  color:
    #ffffff;

  background:
    rgba(36, 23, 15, 0.90);

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  pointer-events:
    none;
}


/* ============================================
   MAP IFRAME
   ============================================ */

.visit-map iframe {
  display:
    block;

  width:
    100%;

  height:
    100%;

  min-height:
    330px;

  border:
    0;
}


/* ============================================
   TABLET / SMALL DESKTOP
   ============================================ */

@media (max-width: 899px) {

  .visit-section .container {
    padding:
      32px;

    gap:
      30px;
  }

  .visit-map {
    min-height:
      300px;
  }

  .visit-map iframe {
    min-height:
      300px;
  }

}


/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 600px) {

  .visit-section {
    padding-top:
      55px;

    padding-bottom:
      55px;
  }


  .visit-section .container {
    gap:
      26px;

    padding:
      24px 18px;

    border-radius:
      22px;
  }


  .visit-info .eyebrow-tag {
    font-size:
      0.66rem;

    padding:
      6px 11px;
  }


  .visit-info h2 {
    font-size:
      2.25rem;

    line-height:
      1.02;
  }


  .visit-description {
    font-size:
      0.88rem;

    line-height:
      1.65;
  }


  .visit-info-list {
    gap:
      11px;

    margin-top:
      22px;
  }


  .visit-info-item {
    gap:
      12px;

    padding:
      12px;
  }


  .visit-info-item .icon-circle {
    width:
      42px;

    height:
      42px;

    font-size:
      16px;
  }


  .visit-info-item strong {
    font-size:
      0.86rem;
  }


  .visit-info-item span,
  .visit-info-item a {
    font-size:
      0.81rem;
  }


  .visit-actions {
    flex-direction:
      column;

    gap:
      10px;

    margin-top:
      20px;
  }


  .visit-actions .btn {
    width:
      100%;
  }


  .visit-map {
    min-height:
      280px;

    border-width:
      5px;

    border-radius:
      18px;
  }


  .visit-map iframe {
    min-height:
      280px;
  }

}


/* ============================================
   SMALL MOBILE
   ============================================ */

@media (max-width: 400px) {

  .visit-section .container {
    padding:
      21px 15px;
  }


  .visit-info h2 {
    font-size:
      2rem;
  }


  .visit-info-item {
    padding:
      11px;
  }


  .visit-info-item .icon-circle {
    width:
      39px;

    height:
      39px;
  }


  .visit-map {
    min-height:
      245px;
  }


  .visit-map iframe {
    min-height:
      245px;
  }

}