/* Mobile card rows preserve the full content without a long vertical stack. */
.mobile-carousel, .footer-links { display: contents; }
.mobile-carousel > .rail-controls, .mobile-roster { display: none; }
.carousel-hint { display: none; }
.rail-controls[hidden] { display: none !important; }
.carousel-caption { display: flex; align-items: center; }
.carousel-caption .rail-status { margin-right: 16px; }

@media (max-width: 700px) {
  .mobile-carousel { display: block; min-width: 0; max-width: 100%; }
  .mobile-carousel > .rail-controls, [data-rail] > .rail-controls {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
  }
  .rail-controls [data-prev] { grid-column: 1; grid-row: 1; }
  .rail-controls [data-next] { grid-column: 3; grid-row: 1; }
  .rail-controls .carousel-caption { grid-column: 2; grid-row: 1; }
  .rail-controls button {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--navy);
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font: 700 28px/1 var(--font-family);
    box-shadow: 0 3px 0 #10182f12;
    touch-action: manipulation;
  }
  .rail-controls button:hover { background: var(--royal); }
  .rail-controls button:disabled { opacity: .4; cursor: default; }
  .carousel-caption { flex-direction: column; justify-content: center; gap: 2px; text-align: center; }
  .carousel-hint { display: block; color: var(--muted); font-size: 14px; font-weight: 650; line-height: 1.4; }
  .carousel-caption .rail-status { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
  .mobile-carousel-track, .rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 89%;
    grid-template-rows: auto;
    gap: 16px;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    scrollbar-color: #b9af9a transparent;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 12px;
    margin: 0;
    min-width: 0;
    max-width: 100%;
  }
  .mobile-carousel-track > *, .rail > * { grid-column: auto; min-width: 0; scroll-snap-align: start; }
  .mobile-carousel-track:focus-visible, .rail:focus-visible { outline: 3px solid var(--burgundy); outline-offset: -3px; border-radius: 5px; }
  .mobile-carousel.is-static .mobile-carousel-track { grid-auto-columns: 100%; }
  .mobile-carousel .resource, .mobile-carousel .contact-card, .mobile-carousel .leader-feature { padding: 24px; }
  .mobile-carousel .contact-card h2, .mobile-carousel .leader-feature h2 { font-size: 32px; overflow-wrap: normal; }
  .mobile-carousel .resource h3, .mobile-carousel .album-card h3 { font-size: 25px; }
  .mobile-carousel .contact-email { overflow-wrap: anywhere; }
  .mobile-carousel .actions { flex-wrap: wrap; }

  .facts-carousel { padding-bottom: 16px; }
  .facts-carousel > .club-facts-scroll {
    display: block;
    max-width: none;
    width: 100%;
    padding: 0 20px;
    scroll-padding-inline: 20px;
    scrollbar-color: var(--gold) #242d43;
  }
  .facts-carousel .club-facts { grid-template-columns: repeat(4, 148px); padding: 20px 0; }
  .facts-carousel .club-fact { padding-inline: 12px; }
  .facts-carousel > .rail-controls { width: calc(100% - 40px); margin: 4px auto 0; }
  .facts-carousel .rail-controls button, .footer-carousel .rail-controls button { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
  .facts-carousel .carousel-hint, .facts-carousel .rail-status, .footer-carousel .carousel-hint, .footer-carousel .rail-status { color: #ede7db; }
  .facts-carousel .mobile-carousel-track:focus-visible, .footer-carousel .mobile-carousel-track:focus-visible { outline-color: var(--gold-light); }
  .founders-carousel .founders { border: 0; border-radius: 0; grid-auto-columns: 66%; }
  .founders-carousel li { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 24px 20px; font-size: 19px; font-weight: 650; }
  .timeline-carousel .timeline { border-left: 0; padding-left: 2px; }
  .timeline-carousel .timeline-item { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: #fff; }
  .timeline-carousel .timeline-item::before { display: none; }
  .timeline-carousel .timeline-item h3 { font-size: 26px; }
  .heritage-carousel .brand-heritage { align-items: stretch; }
  .heritage-carousel figure { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fff; }
  .heritage-carousel img { height: 180px; width: 100%; object-fit: contain; }
  .heritage-carousel figcaption { font-size: 14px; }
  .mobile-rosters-ready .roster { display: none; }
  .roster-carousel .mobile-roster { display: grid; list-style: none; margin: 26px 0 0; }
  .roster-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .roster-card h3 { font-size: 26px; }
  #main .roster-detail { margin: 0; font-size: 19px; }
  .roster-detail span { display: block; }
  .roster-label { margin: 0 0 4px; color: var(--muted); font-size: 15px; font-weight: 650; }
  .steps-carousel .step { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .steps-carousel .step::before { margin-bottom: 18px; }
  .dues-carousel .dues-card { padding: 26px 24px; }
  .issues-carousel .issue-grid { grid-template-rows: repeat(2, auto); gap: 12px 16px; }
  .issues-carousel.is-static .issue-grid { grid-template-rows: auto; }
  .issues-carousel .issue { gap: 10px; padding: 18px 16px; }
  .issues-carousel .empty-state { margin: 0; }
  .photos-carousel figcaption { font-size: 14px; }
  .filters-carousel { margin-bottom: 20px; }
  .filters-carousel .album-tabs { display: flex; gap: 10px; align-items: center; }
  .filters-carousel .album-tabs button { flex: 0 0 auto; min-height: 52px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > .mobile-carousel { grid-column: 1 / -1; }
  .footer-carousel .footer-links { display: grid; align-items: start; }
  .footer-carousel .footer-links > div { grid-column: auto; padding: 20px; border: 1px solid #ffffff30; border-radius: 14px; }
  .footer-carousel a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; }
  .footer-carousel li { margin-bottom: 3px; }
}