/* ===== TripTea — Contact page (information/contact) =======================
   Figma desktop node: 1920-wide hero photo + overlapping two-column card
   (info panel left, enquiry form right). Not wrapped in .container —
   #information-contact sits at body level like the footer/delivery page,
   full-bleed by default without needing a breakout hack.

   The card uses a negative margin-top to pull it up over the photo instead
   of the Figma's fixed absolute position (left:252 top:311, height:688) —
   real translated copy or a taller admin-entered address won't have the
   same content height Figma assumed, and absolute positioning would clip it.
============================================================================ */

#information-contact {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  background: #FAF7F2;
}
#information-contact *, #information-contact *::before, #information-contact *::after {
  box-sizing: border-box;
}

.tt-contact-hero {
  position: relative;
  padding-bottom: 80px;
}

.tt-contact-hero__photo {
  overflow: hidden;
}

.tt-contact-hero__bg {
  display: block;
  width: 100%;
  height: 562px;
  object-fit: cover;
}

/* ===== Map card (overlay on the hero photo) ================================
   Google Maps-style place card: address + two action buttons (view on Maps /
   directions), both built from the same admin-configured address as the
   info panel below (tt.address_line) — no separate address to keep in sync. */
.tt-contact-map-card {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: 16px;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.tt-contact-map-card__text { min-width: 0; }
.tt-contact-map-card__title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #2B2B2B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-contact-map-card__address {
  font-size: 13px;
  line-height: 140%;
  color: #6B6B6B;
}
.tt-contact-map-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tt-contact-map-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5EFE7;
  color: #4A3426;
  transition: background-color 0.15s ease;
}
.tt-contact-map-card__btn svg { width: 18px; height: 18px; }
.tt-contact-map-card__btn:hover { background: #E7D7C8; }
.tt-contact-map-card__btn--primary { background: #8B5E3C; color: #FFFFFF; }
.tt-contact-map-card__btn--primary:hover { background: #6B4528; }

@media (min-width: 1201px) {
  .tt-contact-map-card {
    top: 32px;
    /* Same left-edge formula as every other section (flat 108+144=252px
       gutter through 1920px, growing in step beyond it) so the card lines
       up with the content card below instead of using its own arbitrary
       offset. */
    left: max(252px, calc((100% - 1416px) / 2));
    right: auto;
    width: 480px;
    max-width: none;
  }

  /* Default (center) crop puts the location pin at ~402px down this 562px
     photo — inside the content card's overlap zone below (card starts at
     562-220=342px via its -220px margin-top), so it's hidden. Shifting the
     crop toward the bottom of the source photo brings the pin up to
     ~274px, comfortably above that line. */
  .tt-contact-hero__bg {
    object-position: center 85%;
  }
}

/* ===== Card ================================================================
   Same flat-108px-gutter convention as every other section, plus the extra
   144px inset the blog article hero uses (108+144=252 total at 1920,
   1416px content width) — same numbers, this card is the same visual
   column width as that hero image. */
.tt-contact-card {
  position: relative;
  width: min(1416px, calc(100% - 504px));
  margin: -220px auto 0;
  display: flex;
  align-items: stretch;
  background: #F5EFE7;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(45, 19, 0, 0.10);
  overflow: hidden;
}

.tt-contact-card__info {
  flex: 1 1 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tt-contact-card__form {
  flex: 1 1 0;
  padding: 40px;
  background: #FFFFFF;
}

/* ===== Breadcrumbs =========================================================
   Links share one `display` value (inline) so `vertical-align: middle`
   computes the same way for all of them — mixing inline-flex/inline here
   previously produced a "staircase" where items sat at different heights. */
.tt-contact-breadcrumbs {
  display: block;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 150%;
}
.tt-contact-breadcrumbs a {
  display: inline;
  vertical-align: middle;
  margin: 0 4px 0 0;
  color: #8B5E3C;
  text-decoration: none;
}
.tt-contact-breadcrumbs a:hover { text-decoration: underline; }
.tt-contact-breadcrumbs a:last-of-type {
  color: #6B6B6B;
  text-decoration: none;
  pointer-events: none;
}
.tt-contact-breadcrumbs span {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 4px 0 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #E7D7C8;
}

.tt-contact-card__title {
  margin: 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 120%;
  color: #4A3426;
}

/* ===== Info details ========================================================= */

.tt-contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tt-contact-detail__icon {
  flex: 0 0 24px;
  color: #8B5E3C;
}

.tt-contact-detail__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-contact-detail__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  color: #4A3426;
}

.tt-contact-detail__value {
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
}
.tt-contact-detail__value a {
  color: inherit;
  text-decoration: none;
}
.tt-contact-detail__value a:hover { text-decoration: underline; }

.tt-contact-detail__divider {
  height: 1px;
  background: #E7D7C8;
}

.tt-contact-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}
.tt-contact-social {
  display: block;
  width: 40px;
  height: 40px;
}
.tt-contact-social svg { display: block; width: 100%; height: 100%; }

/* ===== Form ================================================================= */

.tt-contact-form-head {
  margin: 0 0 45px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tt-contact-form-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  color: #4A3426;
}
.tt-contact-form-head__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
}

.tt-contact-form__group {
  margin-bottom: 24px;
}
.tt-contact-form__group--message {
  margin-bottom: 16px;
}

.tt-contact-form__label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  color: #4A3426;
  line-height: 150%;
}

.tt-contact-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tt-contact-form__input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #8B5E3C;
  pointer-events: none;
  flex-shrink: 0;
}
.tt-contact-form__input-wrap .tt-input {
  padding-left: 38px;
}
.tt-contact-form__input-wrap--textarea {
  align-items: stretch;
}
.tt-contact-form__input-wrap--textarea .tt-input {
  padding-left: 15px;
}

.tt-input--textarea {
  height: 170px;
  padding-top: 9px;
  padding-bottom: 9px;
  resize: vertical;
  font-family: inherit;
  line-height: 150%;
}

.tt-contact-form__error {
  margin-top: 6px;
  font-size: 13px;
  color: #BB2F2F;
}

.tt-contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 24px;
  cursor: pointer;
}
.tt-contact-form__consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tt-contact-form__checkbox {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #FFFFFF;
  outline: 1px solid #8B5E3C;
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-contact-form__checkbox svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tt-contact-form__consent input[type="checkbox"]:checked + .tt-contact-form__checkbox {
  background: #8B5E3C;
}
.tt-contact-form__consent input[type="checkbox"]:checked + .tt-contact-form__checkbox svg {
  opacity: 1;
}
.tt-contact-form__consent input[type="checkbox"]:focus-visible + .tt-contact-form__checkbox {
  outline-color: #4A3426;
  outline-width: 2px;
}
.tt-contact-form__consent-text {
  font-size: 14px;
  line-height: 150%;
  color: #4A3426;
  padding-top: 3px;
}
.tt-contact-form__consent-text a {
  color: #6C8299;
  text-decoration: underline;
}

.tt-contact-form__submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 12px;
  background: #8B5E3C;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tt-contact-form__submit:hover { background: #6B4528; }

/* ===== Tablet (1024 and below) ============================================= */
@media (max-width: 1024px) {
  .tt-contact-hero__bg { height: 320px; }

  .tt-contact-card {
    width: calc(100% - 32px);
    margin-top: -120px;
    flex-direction: column;
  }
  .tt-contact-card__info,
  .tt-contact-card__form {
    padding: 32px 24px;
  }
  .tt-contact-card__title { font-size: 36px; }
}

/* ===== Mobile (768 and below) =============================================== */
@media (max-width: 768px) {
  .tt-contact-hero { padding-bottom: 16px; }
  /* Photo sits flush edge-to-edge; the card follows directly below it in
     normal flow instead of floating an overlap over the photo like desktop
     — the page's own #FAF7F2 background already reads as the "frame"
     around the card at this width. */
  .tt-contact-hero__bg {
    height: 186px;
    /* Zoom in on the location pin (sits at ~62%,63% of the source photo)
       so it reads clearly at this small size instead of being a tiny dot
       in a wide street-block view. .tt-contact-hero__photo clips the
       overflow this creates. */
    transform: scale(1.5);
    transform-origin: 62% 63%;
  }

  /* Smaller and anchored top-left only (not stretched edge-to-edge like
     desktop/tablet) — right:auto + a tighter max-width lets it hug its own
     content instead of spanning the photo's full width. */
  .tt-contact-map-card {
    top: 12px;
    left: 12px;
    right: auto;
    max-width: 240px;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
  }
  .tt-contact-map-card__title {
    margin-bottom: 2px;
    font-size: 13px;
  }
  .tt-contact-map-card__address {
    font-size: 10px;
    line-height: 130%;
  }
  .tt-contact-map-card__actions { gap: 6px; }
  .tt-contact-map-card__btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }
  .tt-contact-map-card__btn svg { width: 13px; height: 13px; }

  .tt-contact-card {
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    flex-direction: column;
    border-radius: 8px;
  }
  .tt-contact-card__info,
  .tt-contact-card__form {
    padding: 24px;
  }
  .tt-contact-card__title {
    font-size: 28px;
    /* .tt-contact-card__info is a flex column with gap:24px between every
       child, which stacks with the breadcrumbs' own margin-bottom:16px to
       give 40px here — cancel the flex gap's contribution for just this
       pair so the breadcrumbs' 16px margin is the only spacing, matching
       the design's 16px gap. Desktop is untouched (not part of this ask;
       its own breadcrumb-to-title spacing stays as-is). */
    margin-top: -24px;
  }

  .tt-contact-form-head { margin-bottom: 24px; }
}