/* ═══════════════════════════════════════════════════════════════
   AVIATION AFFAIR — Mobile Stylesheet
   Companion to aviation-affair.css

   Loads after aviation-affair.css and after the shared /assets/css/mobile.css.
   This file handles ONLY website-specific responsive overrides.

   Breakpoint: 768px (matches the shared mobile.css for consistency)
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   ≤ 1024px — TABLET ADJUSTMENTS
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-space-lg);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .ep-row__link {
    grid-template-columns: 220px 1fr;
    gap: var(--aa-space-md);
  }

}


/* ───────────────────────────────────────────────────────────────
   ≤ 768px — MOBILE
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Header ──────────────────────────────────────────────── */
  .site-header__inner {
    padding: 0 var(--aa-space-md);
    gap: var(--aa-space-sm);
  }

  .site-header__wordmark {
    font-size: 1rem;
  }

  .site-header__nav {
    gap: var(--aa-space-md);
  }

  .site-header__nav a {
    font-size: 0.85rem;
  }

  /* ── Home hero ───────────────────────────────────────────── */
  .home-hero {
    padding: var(--aa-space-2xl) 0 var(--aa-space-xl);
  }

  .home-hero__mark {
    width: 80px;
    height: 80px;
  }

  .home-hero__tagline {
    font-size: 0.85rem;
    letter-spacing: 0.3em;
  }

  /* ── Page hero ───────────────────────────────────────────── */
  .page-hero {
    padding: var(--aa-space-2xl) 0 var(--aa-space-lg);
  }

  /* ── Latest episode ──────────────────────────────────────── */
  .latest-ep {
    padding: 0 var(--aa-space-md);
  }

  /* ── Episode rows (Index page) ──────────────────────────── */
  /* Stack thumbnail above text on mobile */
  .ep-row__link {
    grid-template-columns: 1fr;
    gap: var(--aa-space-md);
  }

  .ep-row__thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .ep-row__title {
    font-size: 1.25rem;
  }

  .ep-row__subtitle {
    font-size: 0.95rem;
  }

  /* ── Episode detail ──────────────────────────────────────── */
  .ep-hero {
    padding: var(--aa-space-2xl) 0 var(--aa-space-lg);
  }

  .ep-video {
    border-radius: 0;
    margin-left: calc(-1 * var(--aa-space-lg));
    margin-right: calc(-1 * var(--aa-space-lg));
    width: calc(100% + 2 * var(--aa-space-lg));
  }

  .ep-section-title {
    padding: 0 var(--aa-space-md);
  }

  .ep-learn,
  .ep-transcript,
  .ep-references,
  .ep-downloads-list,
  .about-section,
  .contact-direct,
  .home-about,
  .recent-eps,
  .recent-ars,
  .recent-tuts {
    padding: 0 var(--aa-space-md);
  }

  .ep-transcript {
    font-size: 1rem;
    line-height: 1.7;
  }

  .ep-transcript p:first-child::first-letter {
    font-size: 3rem;
  }

  /* ── Downloads ───────────────────────────────────────────── */
  /* Restructure the 4-column grid to 2 rows on mobile */
  .ep-download {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--aa-space-sm) var(--aa-space-md);
    padding: var(--aa-space-md);
  }

  .ep-download__icon {
    grid-row: 1 / 3;
    align-self: center;
  }

  .ep-download__name {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.95rem;
  }

  .ep-download__size {
    grid-column: 2;
    grid-row: 2;
  }

  .ep-download__action {
    display: none; /* arrow not needed on mobile; entire card is tappable */
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .site-footer {
    padding: var(--aa-space-xl) 0 var(--aa-space-lg);
    margin-top: var(--aa-space-2xl);
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--aa-space-lg);
    padding-bottom: var(--aa-space-lg);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aa-space-sm);
    text-align: left;
  }

  /* ── Newsletter band ─────────────────────────────────────── */
  .newsletter-band {
    padding: var(--aa-space-xl) 0;
    margin-top: var(--aa-space-2xl);
  }

  .newsletter-band__inner {
    padding: 0 var(--aa-space-md);
  }

  .newsletter-band__headline {
    font-size: 1.25rem;
  }

  .newsletter-band__form {
    flex-direction: column;
    gap: var(--aa-space-sm);
  }

  .newsletter-band__form button {
    width: 100%;
  }

  /* ── About sections ──────────────────────────────────────── */
  .about-cta {
    padding: var(--aa-space-lg);
  }

  /* ── Contact ─────────────────────────────────────────────── */
  .contact-direct dd {
    font-size: 1rem;
    word-break: break-word;
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn-primary, .btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* ── Body content padding (override Universal Theme) ───── */
  .t-Body-contentInner {
    padding: 0 var(--aa-space-md);
  }
}


/* ───────────────────────────────────────────────────────────────
   ≤ 480px — SMALL PHONES
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  .site-header__inner {
    padding: 0 var(--aa-space-sm);
  }

  .site-header__brand {
    gap: var(--aa-space-sm);
  }

  .site-header__mark {
    width: 28px;
    height: 28px;
  }

  /* Hide nav text labels on smallest screens; keep theme toggle visible */
  .site-header__nav a {
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  .home-hero__mark {
    width: 64px;
    height: 64px;
  }

  .recent-eps,
  .recent-ars,
  .recent-tuts,
  .ep-row,
  .ep-hero,
  .latest-ep,
  .home-about,
  .about-section,
  .ep-transcript {
    padding-left: var(--aa-space-sm);
    padding-right: var(--aa-space-sm);
  }

  /* Reduce the dropcap on smallest screens */
  .ep-transcript p:first-child::first-letter {
    font-size: 2.5rem;
  }
}


/* ───────────────────────────────────────────────────────────────
   ACCESSIBILITY — REDUCED MOTION
   Respect users who request reduced motion in their OS settings.
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ep-card:hover,
  .ar-card:hover,
  .tut-card:hover {
    transform: none;
  }
}


/* ───────────────────────────────────────────────────────────────
   PRINT
   Quick-and-clean print styles. Useful for transcripts.
   ─────────────────────────────────────────────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .newsletter-band,
  .theme-toggle,
  .ep-downloads-list,
  .home-see-all,
  .latest-ep__more,
  .about-cta {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  .ep-transcript,
  .about-section__body {
    color: black !important;
  }

  a { color: black !important; text-decoration: underline; }
}


/* ───────────────────────────────────────────────────────────────
   ≤ 1024px — TABLET: collapse 3-up card grids to 2-up
   Applies to home-page Recent Articles / Tutorials and to the
   index pages (Articles, Technology) that share the same grid.
   The grid declaration itself lives on the region in APEX.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .recent-ars__grid,
  .recent-tuts__grid,
  .ar-grid,
  .tut-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aa-space-md);
  }

}


/* ───────────────────────────────────────────────────────────────
   ≤ 768px — MOBILE: card grids stack to single column
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .recent-ars__grid,
  .recent-tuts__grid,
  .ar-grid,
  .tut-grid {
    grid-template-columns: 1fr;
    gap: var(--aa-space-md);
  }

  /* Article / tutorial card body — match .ep-card mobile sizing */
  .ar-card__title,
  .tut-card__title {
    font-size: 1.1rem;
  }

  .ar-card__excerpt,
  .tut-card__excerpt {
    font-size: 0.9rem;
  }

  /* Tutorial code-snippet thumb — shrink the font so 6+ lines still fit */
  .tut-card__thumb-code {
    font-size: 0.7rem;
    line-height: 1.45;
  }

  /* Stack the card footer (byline + date) when space is tight */
  .ar-card__footer,
  .tut-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aa-space-xs);
  }

  /* Filter chips — give a touch more breathing room */
  .filter-chips {
    padding: 0 var(--aa-space-md);
    margin-bottom: var(--aa-space-lg);
  }

  .filter-chips__chip {
    font-size: 0.85rem;
    padding: 6px var(--aa-space-md);
  }

  /* Author byline — keep the avatar but allow long names to wrap */
  .byline__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Larger byline on detail pages — slightly smaller on mobile */
  .byline--lg .byline__avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}