/* =====================================================================
   COI page, author, category, article and home templates (T8, PTECH-10514).
   Layout grids, the narrow single column, the author head, the category
   header block and the article body. Card and feed styling stay in
   core/components/card-feed/card-feed.css, including the feed's column
   count: the prototype's main feed (home and category, every width) is a
   single column of full-width cards, which is exactly what that component's
   grid already does with no column override, so this file adds none.
   Scoped under .coi-v2 (no-op while the design switch is off). All sizes
   are rem except the 300px ad-rail track, the documented px exception.
   ===================================================================== */

/* ---------------- Shared layout grid ----------------
   Mobile and tablet (under 922px): one column, rails hidden (Requirements,
   "Page structure and breakpoints"). Desktop: a left rail for Editor's Picks
   and a 300px right rail (--picks and --article alike) that reserves space
   for the ad slot (T12, not built yet; templates only fire the coi_ad_slot
   action, same as the feed's in-feed slot) and, on articles only, the Keep
   reading box under it. */
.coi-v2 .coi-layout {
  /* Astra's header.php (parent theme) opens a flex row (.ast-container)
     around this template's output and closes it in its footer.php; an
     explicit width keeps this element filling that row as a normal block
     would, instead of the shrink-to-content sizing a flex item gets by
     default. Needed for max-width + margin: auto below to actually center
     it, and for the explicit single track right after this to have a real
     width to resolve "1fr" against. Found capturing PTECH-10514 evidence
     locally, against the Student Section Dev content. */
  width: 100%;
  max-width: var(--coi-max);
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
  display: grid;

  /* Explicit single track with a 0 minimum, not the implicit auto track
     grid would otherwise create: an implicit/auto track's default
     min-width is its content's min-content size, which let a wide grid
     child (e.g. the feed, or an author card row) force this track wider
     than the viewport instead of shrinking to it. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--coi-gap);
}

.coi-v2 .coi-layout__rail-left,
.coi-v2 .coi-layout__rail-right {
  display: none;
}

/* stylelint-disable-next-line unit-disallowed-list -- breakpoint px to match Astra's own 922px breakpoint (Requirements, "Page structure"), not a design size */
@media (min-width: 922px) {
  .coi-v2 .coi-layout--picks {
    /* stylelint-disable-next-line unit-disallowed-list -- the 300px ad rail is the documented px exception (CLAUDE.md section 2) */
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 34rem) 300px;
    justify-content: center;
  }

  .coi-v2 .coi-layout--article {
    /* stylelint-disable-next-line unit-disallowed-list -- the 300px ad rail is the documented px exception (CLAUDE.md section 2) */
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 42rem) 300px;
    justify-content: center;
  }

  .coi-v2 .coi-layout__rail-left,
  .coi-v2 .coi-layout__rail-right {
    display: block;
  }

  /* position: sticky goes on this inner wrapper, not on .coi-layout__rail-left
     / .coi-layout__rail-right directly, matching the prototype's own
     structure (<aside class="coi-rail--..."><div class="coi-sticky">...).
     The outer rail is a grid item stretched by the default align-items:
     stretch to the full row height (as tall as the feed next to it, often
     thousands of px); a position: sticky element with that "stretched", not
     content-sized, height never actually sticks (confirmed against the real
     Student Section Dev content capturing PTECH-10514 evidence: the rail's
     content scrolled away instead of staying pinned). The inner .coi-sticky
     wrapper keeps its own natural content height instead, which sticky needs
     to clamp against.
     The rail owns the gap between its own items (flex + gap on this same
     wrapper), instead of each item setting its own margin-top: a gap only
     renders between two items that both exist, so the space above Keep
     reading disappears on its own once the ad slot (T12, not built yet)
     renders nothing, with no "is there an ad" check needed here. Keep
     reading's own fixed margin-top is removed in a separate T7 follow-up
     (PTECH-10513), per Amanda's comment on PTECH-10514 (2026-10-28). */
  .coi-v2 .coi-sticky {
    display: flex;
    flex-direction: column;
    gap: var(--coi-gap);
    position: sticky;
    top: 5.5rem;
  }
}

/* ---------------- General pages: About, Copyright (narrow single column) ---------------- */
.coi-v2 .coi-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.6rem 1rem 3rem;
}

.coi-v2 .coi-page__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--coi-heading);
  margin: 0 0 1.2rem;
}

/* Astra's own heading typography otherwise applies here (no styles of ours),
   which on the Student Section Dev content computes to the same 2rem as our
   own H1 above, erasing the hierarchy the prototype's About page shows
   (confirmed against its own computed styles: content H2 at 1.5rem/700,
   same navy as the page title, not a separate muted color). */
.coi-v2 .coi-page__body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--coi-heading);
  margin: 1.8rem 0 0.7rem;
}

.coi-v2 .coi-page__body a {
  color: var(--coi-rule);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------- Author grid ----------------
   The author page is a multi-column grid, unlike home/category's single
   column of full-width cards (author.php has the full explanation).
   Confirmed against the prototype's own computed grid: 4 columns at 1440px,
   each a plain 15rem minimum so auto-fill adds/drops columns at other
   widths instead of needing its own breakpoints. */
.coi-v2 .coi-layout--author .coi-feed {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* ---------------- Author head ----------------
   A horizontal row (avatar circle, then name/bio stacked to its right),
   left-aligned -- confirmed against the prototype's own markup and
   computed styles, not the centered/stacked layout this used to have. */
.coi-v2 .coi-author-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.4rem;
}

/* An initials circle (prototype: .coi-avatar), not a Gravatar photo --
   author.php computes the initials text this displays. */
.coi-v2 .coi-author-head__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--coi-primary);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.coi-v2 .coi-author-head__name {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--coi-heading);
  margin: 0;
}

.coi-v2 .coi-author-head__bio {
  color: var(--coi-muted);
  margin: 0.3rem 0 0;
}

/* ---------------- Category header block ----------------
   A full-width row above the three-column .coi-layout (Requirements,
   "Category pages"; confirmed against the prototype: title, description and
   chips span the whole container, not just the main column next to Editor's
   Picks). .coi-category-page is the single element Astra's flex row sees
   (category.php has the full explanation); it only needs the same width:100%
   workaround .coi-layout itself already uses. */
.coi-v2 .coi-category-page {
  width: 100%;
}

.coi-v2 .coi-category-head-wrap {
  width: 100%;
  max-width: var(--coi-max);
  margin: 0 auto;
  padding: 1.75rem 1rem 0;
}

.coi-v2 .coi-category-head {
  margin-bottom: 1.25rem;
}

.coi-v2 .coi-category-head__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coi-accent);
  margin: 0 0 0.35rem;
}

.coi-v2 .coi-category-head__title {
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--coi-heading);
  margin: 0 0 0.5rem;
}

.coi-v2 .coi-category-head__desc {
  color: var(--coi-muted);
  margin: 0 0 1rem;
}

.coi-v2 .coi-subchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

/* ---------------- Article ---------------- */
.coi-v2 .coi-article__tag {
  display: inline-block;
  background: var(--coi-tag-bg);
  color: var(--coi-tag-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.coi-v2 .coi-article__title {
  font-size: 2rem;
  line-height: 1.15;
  color: var(--coi-heading);
  margin: 0 0 0.9rem;
}

.coi-v2 .coi-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: var(--coi-muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.coi-v2 .coi-article__meta a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.coi-v2 .coi-article__figure {
  margin: 0 0 1.5rem;
}

.coi-v2 .coi-article__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--coi-radius);
}

.coi-v2 .coi-article__figure figcaption {
  color: var(--coi-muted);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* Body links underlined in the brand color (Requirements, "Article page"). */
.coi-v2 .coi-article__body a {
  color: var(--coi-rule);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.coi-v2 .coi-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0;
  padding: 1rem 0;
  border-top: var(--coi-box-rule-w) solid var(--coi-box-rule);
  border-bottom: var(--coi-box-rule-w) solid var(--coi-box-rule);
}

.coi-v2 .coi-share__label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--coi-muted);
  margin-right: 0.3rem;
}

.coi-v2 .coi-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--coi-surface);
  color: var(--coi-primary);
}

.coi-v2 .coi-share__link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentcolor;
}