/* Hallmark · macrostructure: Scroll-Story Scene (the homepage's /pack system) · page: /ad-library
 * tone: receipts-first, plainspoken · anchor hue: UpHex blue 257° · theme: UpHex brand (locked)
 * Loaded after pack_start.css and uphex_home.css, whose hero, stats, fineprint, close, and footer styles this page reuses.
 * Motion lives in app/javascript/local_business/library_story.js; every rule here is the finished state.
 */

/* ------------------------------------------------------------------ 1 · hero (copy + a fan of three real ads) */
.library-hero { padding-bottom: var(--space-3xl); }
.library-hero .kicker { margin-bottom: var(--space-md); }
.library-hero .hero__title { max-width: 12ch; font-size: clamp(2.6rem, 5.4vw + 0.5rem, 5.25rem); }
.library-hero__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.library-fan { position: relative; display: grid; justify-items: center; min-height: 22rem; }
.library-fan__card {
  grid-area: 1 / 1; align-self: center; width: min(64%, 17rem); margin: 0; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-lift);
}
.library-fan__card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: color-mix(in oklab, var(--color-canvas) 60%, var(--color-rule)); }
.library-fan__card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
.library-fan__card .kicker { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-fan__cpl { font-weight: 800; color: var(--color-blue-deep); white-space: nowrap; }
.library-fan__card--1 { z-index: 3; transform: translateY(-4%); }
.library-fan__card--2 { z-index: 2; transform: translateX(-34%) rotate(-8deg); }
.library-fan__card--3 { z-index: 1; transform: translateX(34%) rotate(8deg); }
.library-stats { margin-top: var(--space-3xl); }
/* Narrow phones: a tighter fan, so the tilted side cards stay inside the screen. */
@media (max-width: 420px) {
  .library-fan__card { width: 58%; }
  .library-fan__card--2 { transform: translateX(-26%) rotate(-7deg); }
  .library-fan__card--3 { transform: translateX(26%) rotate(7deg); }
}
@media (min-width: 960px) {
  .library-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .library-fan { min-height: 30rem; }
  .library-fan__card { width: min(58%, 19rem); }
}

/* ------------------------------------------------------------------ 2 · the wall */
.library-wall { padding: var(--space-3xl) 0 var(--space-4xl); }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-2xl); }
.library-grid > li { min-width: 0; }
.library-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-soft);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.library-card__media { position: relative; }
/* contain, not cover: many creatives are landscape with the headline at the edge, and a crop cuts the ad's own words. */
.library-card__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: color-mix(in oklab, var(--color-canvas) 60%, var(--color-rule)); }
.library-card__platform {
  position: absolute; top: var(--space-xs); left: var(--space-xs);
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-navy); box-shadow: var(--shadow-soft);
  font-size: var(--text-xs); font-weight: 800;
}
.library-card__platform--facebook { color: var(--color-blue-deep); }
.library-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; padding: var(--space-md); }
.library-card__offer { font: 800 var(--text-base)/1.25 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.library-card__cpl { margin-top: auto; padding-top: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.library-card__cpl span { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-blue-deep); margin-right: 2px; }
.library-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-xs) 0 0; font-size: var(--text-xs); }
.library-card__meta dt { color: var(--color-muted); font-weight: 600; }
.library-card__meta dd { margin: 0; font-weight: 800; }
.library-wall__foot { margin-top: var(--space-xl); text-align: center; }
@media (min-width: 760px) { .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 1100px) { .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ 3 · the pick (night) */
.library-pick { padding: var(--space-4xl) 0; background: radial-gradient(70% 60% at 70% 50%, var(--color-navy-raised), var(--color-navy-deep) 72%); color: var(--color-on-navy); }
.library-pick :focus-visible { outline-color: var(--color-focus-on-navy); }
.library-pick__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.library-pick__link { margin-top: var(--space-md); }
.library-pick__link a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 800; color: var(--color-blue-light); text-underline-offset: 3px; }
.library-pick__link a:hover { color: var(--color-on-navy); }
.library-pick__pair { display: grid; gap: var(--space-md); }
.library-pick__ad {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: end;
  padding: var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-navy-raised); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent);
}
.library-pick__ad .kicker { grid-column: 1 / -1; color: var(--color-on-navy-2); }
.library-pick__offer { font-weight: 700; overflow-wrap: anywhere; }
.library-pick__cpl { font: 800 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.045em; white-space: nowrap; }
.library-pick__cpl small { font-size: 0.4em; letter-spacing: 0; color: var(--color-on-navy-2); margin-left: 2px; }
.library-pick__ad--best { background: var(--color-surface); color: var(--color-navy); box-shadow: var(--shadow-glow); }
.library-pick__ad--best .kicker, .library-pick__ad--best small { color: var(--color-muted); }
.library-pick__ad--best .library-pick__cpl { color: var(--color-blue-deep); }
@media (min-width: 960px) { .library-pick__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .library-card { transition: none; }
}