/*
  styles-responsive.css
  Responsive overrides for Trailmark.
  Uses media queries to adjust layout for tablet and mobile.
  Loaded after styles.css so these rules take priority.
*/

/* =====================
   TABLET — up to 900px
   2-column card grid
===================== */
@media (max-width: 900px) {
  #hero.hero--park,
  #hero.hero--yosemite {
    min-height: 620px;
  }

  .hero--park .hero-inner,
  .hero--yosemite .hero-inner {
    left: 1.75rem;
    bottom: 2rem;
    width: min(calc(100% - 3.5rem), 34rem);
  }

  .hero--park .hero-title,
  .hero--yosemite .hero-title {
    font-size: clamp(3.25rem, 9vw, 4.6rem);
  }

  .valley-layout,
  .badge-showcase-layout,
  .archive-layout,
  .knowledge-layout,
  .photography-layout {
    grid-template-columns: 1fr;
  }

  .highlights-grid,
  .season-grid,
  .discovery-grid,
  .stewardship-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .highlight-card--yosemite-falls {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  .badge-showcase-copy,
  .archive-copy,
  .valley-copy {
    max-width: none;
  }

  #hero.hero--homepage {
    min-height: 660px;
    padding: 4.75rem 1.75rem 3.5rem;
  }

  .hero-shell {
    min-height: 540px;
  }

  .hero-scene-art--base {
    object-position: 58% 50%;
  }

  .hero--homepage .hero-inner {
    max-width: 29rem;
  }

  .hero--homepage .hero-subtitle {
    max-width: 27rem;
  }

  .badge-system-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .badge-system-copy {
    max-width: 100%;
  }

  .collector-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cards-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .park-card--featured {
    min-height: 0;
  }

  .park-card--featured .card-title {
    font-size: clamp(2.1rem, 5vw, 2.9rem);
  }

  .park-card--secondary {
    flex-direction: column;
    min-height: 100%;
  }

  .park-card--secondary .card-badge-area {
    width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .park-card--secondary .card-badge-frame {
    width: min(100%, 11.5rem);
  }

  .park-card--secondary .park-badge {
    width: 132px;
    height: 132px;
  }

  .value-prop-pillars {
    gap: 1.5rem;
  }

  .stats-list {
    gap: 3rem;
  }
}

/* =====================
   MOBILE — up to 600px
   Single-column layout
===================== */
@media (max-width: 600px) {
  #site-header {
    padding: 0.875rem 1.25rem;
  }

  #site-nav {
    width: 100%;
  }

  .header-inner {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .nav-list {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .nav-link {
    padding: 0.45rem 0.65rem;
  }

  #hero {
    padding: 3rem 1.25rem;
    min-height: 420px;
  }

  #hero.hero--homepage {
    padding: 4.5rem 1.25rem 3rem;
    min-height: 700px;
  }

  #hero.hero--park,
  #hero.hero--yosemite {
    padding: 0;
    min-height: 540px;
  }

  .hero-shell {
    min-height: 580px;
    align-items: flex-end;
  }

  .hero--homepage .hero-inner {
    max-width: 19rem;
    padding: 0 0 0.25rem;
  }

  .hero--homepage .hero-title {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    line-height: 0.96;
    margin-bottom: 1rem;
  }

  .hero--homepage .hero-eyebrow {
    margin-bottom: 1rem;
  }

  .hero--homepage .hero-subtitle {
    max-width: 18rem;
    font-size: 1rem;
    line-height: 1.58;
    margin-bottom: 0.75rem;
  }

  .hero-scene-art--base {
    object-position: 66% 50%;
  }

  #badge-system {
    padding: 3rem 1.25rem;
  }

  .badge-system-title {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .collector-board {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .badge-entry--featured {
    grid-column: auto;
  }

  .badge-entry-top {
    grid-template-columns: 1fr;
  }

  .badge-entry-badge {
    justify-self: start;
  }

  .badge-system-mark {
    width: 116px;
    height: 116px;
  }

  #park-grid {
    padding: 2.5rem 1.25rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .cards-secondary {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .park-card,
  .park-card--secondary {
    flex-direction: column;
    min-height: 0;
  }

  .card-badge-area,
  .park-card--secondary .card-badge-area {
    width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .card-badge-frame,
  .park-card--secondary .card-badge-frame {
    width: min(100%, 11rem);
  }

  .card-body,
  .park-card--secondary .card-body {
    padding: 1.35rem 1.25rem 1.5rem;
    gap: 0.75rem;
  }

  .park-card--featured .card-title {
    font-size: clamp(2rem, 10vw, 2.6rem);
    max-width: none;
  }

  .park-badge {
    width: 120px;
    height: 120px;
  }

  /* Parallax is JS-disabled on mobile — remove GPU compositing hint */
  .hero-layer,
  .hero-stars,
  .hero-fog {
    will-change: auto;
  }

  /* Park detail — stack intro on mobile */
  .park-intro-inner {
    grid-template-columns: 1fr;
  }

  .park-badge--hero {
    width: 160px;
    height: 160px;
  }

  .valley-layout,
  .badge-showcase-layout,
  .archive-layout,
  .knowledge-layout,
  .photography-layout {
    grid-template-columns: 1fr;
  }

  .highlights-grid,
  .season-grid,
  .discovery-grid,
  .stewardship-list,
  .badge-plaque-footer {
    grid-template-columns: 1fr;
  }

  .park-section--overview,
  .park-section--thesis,
  .park-section--highlights,
  .park-section--editorial,
  .park-neighbors {
    padding: 3rem 1.25rem;
  }

  .discovery-card {
    min-height: 0;
  }

  .stewardship-panel {
    padding: 1.4rem 1.2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-btn {
    width: 100%;
    max-width: 240px;
    text-align: center;
  }

  .hero--homepage .hero-actions {
    justify-content: flex-start;
  }

  #hero.hero--park,
  #hero.hero--yosemite {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hero--park .park-poster,
  .hero--yosemite .yosemite-poster {
    position: relative;
    inset: auto;
    width: 100%;
    height: 62vw;
    min-height: 220px;
    max-height: 340px;
  }

  .hero--park .park-poster-art,
  .hero--yosemite .yosemite-poster-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-focus, center center);
  }

  .hero--park .hero-inner,
  .hero--yosemite .hero-inner {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: auto;
    margin: 0;
    padding: 1.25rem 1.15rem 1.6rem;
    text-shadow: none;
  }

  .knowledge-layout--with-extra {
    grid-template-columns: 1fr;
  }

  .hero--park .hero-title,
  .hero--yosemite .hero-title {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .hero-ledger {
    gap: 0.75rem 1rem;
  }

  .valley-copy,
  .badge-showcase-copy,
  .archive-copy {
    max-width: none;
  }

  .field-note-quote p {
    font-size: clamp(1.7rem, 9vw, 2.3rem);
  }

  .archive-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .value-prop-pillars {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .stats-list {
    gap: 2rem;
  }

  #about-trailmark {
    padding: 2.5rem 1.25rem;
  }

  #closing-cta {
    padding: 2rem 1.25rem 1rem;
  }

  .closing-cta-inner {
    padding: 1.8rem 1.2rem 1.6rem;
    border-radius: 20px;
  }

  .closing-cta-kicker {
    letter-spacing: 0.14em;
  }

  .site-footer {
    padding: 1.4rem 1.1rem 0.9rem;
  }
}