/* ==========================================================================
   OTN theme: About and FAQ page layout (DESIGN.md 8.3, 8.4), ported from
   the mockups' assets/css/pages/about.css.
   Every component these pages use (About sub-menu, page head, lower thirds,
   GM callout, where-to-watch band, FAQ accordion, closing band) is styled
   in components.css and blocks.css; this file only places them. Every
   selector starts with a block no other page uses: otn-aboutpage,
   otn-faqpage.
   ========================================================================== */


/* --------------------------------------------------------------------------
   8.3 About: overview
   Phones: the text, then the photo, 32px apart.
   From 900px: two columns, 7fr text | 5fr photo, 48px apart.
   -------------------------------------------------------------------------- */

.otn-aboutpage__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-6);
}

.otn-aboutpage__text {
  min-width: 0;
}

/* The photo keeps its own shape (888 x 540) on a black mat (the mockups'
   wrapper, or the image block with the class otn-mat) */
.otn-aboutpage__photo {
  min-width: 0;
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

.otn-aboutpage__photo img {
  width: 100%;
  height: auto;
}

.otn-aboutpage__media {
  min-width: 0;
}

/* GM visit callout (.otn-callout, 6.22): reading width, under the columns.
   The Overview section is tight (half padding, for the gap under the page
   head); this bottom margin gives back the other half, so the #203299
   callout keeps a full section's space above the #203299 where-to-watch
   band (48px on phones, 96px at 1440). :root because the callout is its
   group's last block, and core's ":root :where(.is-layout-flow) >
   :last-child" (0,2,0) would otherwise take the margin away. */
:root .otn-aboutpage__visit {
  max-width: var(--otn-w-reading);
  margin-top: var(--otn-space-7);
  margin-bottom: calc(var(--otn-section-y) / 2);
}

/* The button's own 24px top margin is the only space between them */
.otn-aboutpage__visit > p,
:root .otn-aboutpage__visit > p {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .otn-aboutpage__overview {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--otn-space-7);
  }

  /* Same width as the 7fr text column above (672px at 1440), so its right
     edge lines up with that column, 48px short of the photo */
  .otn-aboutpage__visit {
    max-width: calc((100% - var(--otn-space-7)) * 7 / 12);
    margin-top: var(--otn-space-8);
  }
}


/* --------------------------------------------------------------------------
   8.4 FAQ: the accordion under the page head
   The page head's bottom padding is the space above; the closing band
   brings its own rule and padding below.
   -------------------------------------------------------------------------- */

.otn-faqpage {
  padding-bottom: var(--otn-section-y);
}