/* ---- Contact page — page-specific styles ----
   Originally developed as the "Contact 02" redesign and promoted to
   replace the live /contact/ page. Selectors keep their contact-02__
   prefix (not renamed — internal only, safely isolated) so this page still
   never shares selectors with the Our Story page (about/our-story/index.html)
   or its stylesheet. Do not import project-detail.css here — keep this
   file self-contained. Shared/global rules (site header, nav, buttons,
   typography, grid, containers, footer, panel engine in panel.css) are not
   duplicated — this page continues to use those directly. */

/* Intro — split layout on desktop */
.contact-02__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .contact-02__intro {
    flex-direction: row;
    gap: var(--space-16);
  }

  .contact-02__intro > * {
    flex: 1 1 50%;
  }

  .contact-02__intro--60-40 > :first-child {
    flex-basis: 60%;
  }

  .contact-02__intro--60-40 > :last-child {
    flex-basis: 40%;
  }
}

.contact-02__intro-heading {
  max-width: 45rem;
  margin-bottom: var(--space-8);
  line-height: var(--line-height-normal);
}

@media (min-width: 1280px) {
  .contact-02__intro-heading {
    font-size: var(--font-size-h2-md);
  }
}

/* Editorial image + text module — asymmetric split */
.contact-02__editorial {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .contact-02__editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.contact-02__image {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .contact-02__image--landscape {
    aspect-ratio: 16 / 9;
  }
}

/* Feature variant — wider image column, text stretched to the image's
   full height so Sydney/Southern Highlands can anchor to its top/bottom. */
@media (min-width: 1024px) {
  .contact-02__editorial--feature {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
  }
}

.contact-02__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .contact-02__content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
  }
}

/* Fixed-width column + anchoring margins only make sense once .contact-02__content
   switches to a row (768px, above) — .contact-02__location:first-child's
   flex: 0 0 18rem sets its main-axis size, which is HEIGHT while the
   container is still flex-direction: column on mobile/tablet, forcing the
   Sydney block to a fixed 18rem-tall box regardless of its actual content
   height and leaving a large empty gap before Southern Highlands. Below
   768px the two blocks just stack full-width with .contact-02__content's
   own gap providing the spacing between them. */
/* Sydney sits a little below the "Visit" heading above it even on
   mobile/tablet, before .contact-02__content switches to a row. */
.contact-02__content > .contact-02__location:first-child {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .contact-02__content > .contact-02__location:first-child {
    flex: 0 0 18rem;
    min-width: 18rem;
    max-width: 18rem;
    /* Nudged down a bit further than before — was space-16. */
    margin-top: var(--space-20);
  }

  .contact-02__content > .contact-02__location:last-child {
    flex: 1 1 auto;
    margin-bottom: var(--space-16);
    align-self: flex-end;
  }
}

/* Reverse variant — mirrors column order */
.contact-02__editorial--reverse > *:first-child {
  order: 2;
}

.contact-02__editorial--reverse > *:last-child {
  order: 1;
}

@media (min-width: 1024px) {
  .contact-02__editorial--feature.contact-02__editorial--reverse {
    grid-template-columns: 2fr 3fr;
    align-items: center;
  }

  .contact-02__editorial--reverse .contact-02__content {
    justify-self: end;
  }
}

.contact-02__heading {
  margin-bottom: var(--space-6);
}

.contact-02__text {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

/* "Visit" heading — sits above the two address columns (.contact-02__content
   below), inside the same grid cell as the image's text column.
   .contact-02__editorial--feature stretches this wrapper to the image's
   full height (align-items: stretch) — flex column + flex: 1 on
   .contact-02__content passes that full height down to it, so Southern
   Highlands' align-self: flex-end still anchors to the true bottom of the
   image rather than just the address block's own natural height. */
.contact-02__visit {
  display: flex;
  flex-direction: column;
}

.contact-02__visit-heading {
  margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .contact-02__visit .contact-02__content {
    flex: 1;
  }
}

.contact-02__directions-link {
  display: inline-block;
  font-size: var(--font-size-body-small);
  color: var(--color-accent);
  padding-bottom: var(--space-2);
}

.contact-02__label {
  color: var(--color-accent);
}

.contact-02__hours {
  display: inline-block;
  padding-bottom: var(--space-8);
}

/* Highlights — 3-panel scroll sequence (reuses panel.css's shared pinned
   crossfade engine via .panel-sequence/.panel — only the instance-specific
   image crops and text-visibility/spacing rules live here). */
.contact-02__highlight-1 .panel__bg img { object-position: center 35%; }
.contact-02__highlight-2 .panel__bg img { object-position: center 50%; }
.contact-02__highlight-3 .panel__bg img { object-position: center 55%; }

.contact-02__highlights {
  margin-block: var(--space-20);
}

@media (min-width: 1024px) {
  .contact-02__highlights {
    margin-block: var(--space-32);
  }
}

.contact-02__highlights .panel__heading {
  max-width: none;
  margin-inline: 0;
}

.contact-02__highlights .panel__heading.panel__body {
  max-width: 34rem;
  margin-inline: auto;
}

/* Vision module — a second, independent copy of the Editorial Module 2
   pattern (image + text, asymmetric split). Kept fully separate from
   .contact-02__editorial/.contact-02__content above, which have since been
   customised for the two-location address layout. */
.contact-02__vision {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .contact-02__vision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.contact-02__vision-image {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .contact-02__vision-image--landscape {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .contact-02__vision--feature {
    grid-template-columns: 3fr 2fr;
    align-items: end;
  }

  .contact-02__vision--feature .contact-02__vision-content {
    max-width: 24rem;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
  }
}

.contact-02__vision--reverse > *:first-child {
  order: 2;
}

.contact-02__vision--reverse > *:last-child {
  order: 1;
}

@media (min-width: 1024px) {
  .contact-02__vision--feature.contact-02__vision--reverse {
    grid-template-columns: 2fr 3fr;
    align-items: center;
  }

  .contact-02__vision--reverse .contact-02__vision-content {
    justify-self: end;
  }
}

.contact-02__vision-heading {
  margin-bottom: var(--space-6);
}

.contact-02__vision-text {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.contact-02__vision .contact-form__controls .btn {
  font-size: var(--font-size-body-regular);
}