/* ==========================================================================
   Project Townsville - layout.css
   Container, section rhythm, grid patterns, full viewport hero.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --------------------------------------------------------------------------
   Section rhythm
   Generous and roughly constant, per the visual language spec.
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-section-sm);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-section);
  }
}

.section--tight {
  padding-block: calc(var(--space-section-sm) * 0.7);
}

@media (min-width: 768px) {
  .section--tight {
    padding-block: calc(var(--space-section) * 0.6);
  }
}

.section--dark {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
  color: var(--color-surface);
}

/* Any prose sitting directly on a dark surface. Catches text that is not
   inside a component with its own dark treatment. */
.on-dark {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Asymmetric two column
   Large heading left, small supporting copy far right. Not a balanced split.
   -------------------------------------------------------------------------- */

.split-intro {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .split-intro {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: start;
  }
}

/* Copy beside media. Reversible with --flip. */
.split-media {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .split-media {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .split-media--flip .split-media-figure {
    order: -1;
  }
}

/* Two column list. Rows stay hairline separated inside each column. */
.list-columns {
  display: grid;
  gap: 0 4rem;
}

@media (min-width: 900px) {
  .list-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Full viewport hero
   Client directive, overrides the reference which uses a contained hero.
   svh rather than vh so mobile browser chrome does not push content out of
   view. Minimum height guards very short landscape phone viewports.
   -------------------------------------------------------------------------- */

.hero-full {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  height: 100svh;
  padding-block: 8rem 5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-full-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-full-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
}

/* Gradient overlay. Weighted to the lower left where the headline sits, and
   tuned against the brightest region of the photograph rather than its
   average, so white text clears AA everywhere it lands. */
.hero-full-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(8, 29, 45, 0.94) 0%,
      rgba(8, 29, 45, 0.82) 28%,
      rgba(8, 29, 45, 0.58) 58%,
      rgba(8, 29, 45, 0.45) 100%
    );
}

.hero-full-inner {
  width: 100%;
}

/* Scroll cue. A full viewport hero is very good at hiding the fact that the
   page continues, so the cue is not decorative. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-target);
  padding-inline: 0.75rem;
  color: var(--color-surface);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-scroll-cue:hover {
  color: var(--color-cyan);
}

.hero-scroll-cue-arrow {
  animation: cue-nudge 2.4s ease-in-out infinite;
}

@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Band variant. Same photographic construction as the hero, section height
   rather than viewport height. Used for the closing call to action. */
.hero-full--band {
  height: auto;
  min-height: 0;
  align-items: center;
  padding-block: var(--space-section-sm);
}

@media (min-width: 768px) {
  .hero-full--band {
    padding-block: var(--space-section);
  }
}

/* Interior page heroes are contained, per the reference. */
.page-hero {
  padding-block: 6rem 3rem;
  border-bottom: var(--hairline-weight) solid var(--color-hairline);
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: 9rem 4.5rem;
  }
}