/* =====================================================================
   COI card + feed component (PTECH-10510).
   Story card: portrait 5:7, full-bleed photo, category tag, headline over a
   bottom gradient, time label. Feed: 20 cards then Load more.
   Scoped under .coi-v2 (no-op while the design switch is off). Brand
   colors come from the --coi-* tokens (core/assets/css/coi-core.css and
   config/brand.css), never hard-coded here. Everything in rem; the one
   px value below (the ad slot width) is the documented exception for the
   300px ad rail.
   ===================================================================== */

.coi-v2 .coi-feed {
  display: grid;
  gap: 1.25rem;
}

.coi-v2 .coi-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--coi-radius);
  background: var(--coi-surface);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.coi-v2 .coi-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.coi-v2 .coi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(var(--coi-overlay-rgb), 0.9) 0%,
    rgba(var(--coi-overlay-rgb), 0.5) 38%,
    rgba(var(--coi-overlay-rgb), 0) 68%
  );
}

.coi-v2 .coi-card__tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--coi-tag-bg);
  color: var(--coi-tag-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
}

.coi-v2 .coi-card__body {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
}

.coi-v2 .coi-card__title {
  /* Clamp to 3 lines: a long real headline (unlike the shorter QA fixture
     titles PTECH-10510's own evidence used) overflowed the card's fixed 5:7
     box and the gradient overlay, since .coi-card__body has no height limit
     of its own. Found capturing PTECH-10514 evidence against real Student
     Section Dev content. Without ellipsis, webkit hard-cuts line 3 at the box
     edge mid-word ("Washingto", "Oklahoma", "Kansas" in PTECH-10514 comment
     173647); Amanda's T8 status asked for the fix to land here, in
     card-feed.css, under T4 (PTECH-10510). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.coi-v2 .coi-card__time {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.92;
}

.coi-v2 .coi-card:hover .coi-card__title,
.coi-v2 .coi-card:focus-visible .coi-card__title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.coi-v2 .coi-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1.6rem 0 0.4rem;
}

.coi-v2 .coi-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--coi-secondary);
  color: #fff;
  border: 0;
  /* stylelint-disable-next-line unit-disallowed-list -- 999px is the fully-round-pill technique (any value past the button's half-height has the same effect), not a design size */
  border-radius: 999px;
  padding: 0.85rem 2.2rem;
  text-decoration: none;
  display: inline-block;
}

.coi-v2 .coi-btn:hover,
.coi-v2 .coi-btn:focus-visible {
  background: var(--coi-accent);
  color: var(--coi-on-accent);
}

.coi-v2 .coi-btn[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.coi-v2 .coi-end {
  color: var(--coi-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ---------------- In-feed ad slot (Requirements: reserved-size box, an
   "Advertisement" label, a Yozons <yz-ad> tag inside). T12 fills the box;
   until then coi_in_feed_ad_slot() outputs nothing and this rule has no
   effect. 300px matches the ad rail's fixed size, the documented px
   exception; all other sizing here stays in rem. */
.coi-v2 .coi-ad {
  margin: 0 auto 1rem;
  text-align: center;
}

.coi-v2 .coi-ad__label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coi-muted);
  margin-bottom: 0.25rem;
}

.coi-v2 .coi-ad__box {
  /* stylelint-disable-next-line unit-disallowed-list -- the 300px ad rail is a documented px exception (CLAUDE.md section 2) */
  width: 300px;
  max-width: 100%;
  height: 15.625rem;
  margin: 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  .coi-v2 .coi-card,
  .coi-v2 .coi-btn {
    transition: background-color 0.15s ease;
  }
}