/* Griffiths & Co. — podcast banner (handoff 3, option 16e). Standalone;
   picks up --gc-* tokens from griffiths.css when present. */

/* ==========================================================================
   Griffiths & Co. — podcast "coming soon" banner
   Standalone: does not require griffiths.css, but reuses the same token names
   so it inherits them automatically if griffiths.css is loaded first.
   ========================================================================== */

.gcp {
  --gcp-brand:     var(--gc-brand, #001B65);
  --gcp-champagne: var(--gc-champagne, #C6A96B);
  --gcp-bone:      var(--gc-bone, #F3EFE6);
  --gcp-dim:       #9FB0D8;
  --gcp-display:   'Archivo Black', Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --gcp-serif:     'Marcellus', 'Times New Roman', Georgia, serif;
  --gcp-ui:        var(--gc-ui, 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  --gcp-gutter:    clamp(20px, 4.4vw, 64px);
  /* Length of the waveform bars. The inner grid reserves this much bottom
     padding plus a buffer, so the bars always run under empty panel — they
     sit behind the content and never reach the text. */
  --gcp-wave-h:    62px;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--gcp-brand);
  border-top: 1px solid rgba(198, 169, 107, .55);
  border-bottom: 1px solid rgba(198, 169, 107, .55);
  color: var(--gcp-bone);
}
.gcp *, .gcp *::before, .gcp *::after { box-sizing: border-box; }
.gcp img { display: block; max-width: 100%; }
.gcp p, .gcp h2, .gcp figure, .gcp figcaption { margin: 0; }

/* champagne bloom overhead */
.gcp__bloom {
  position: absolute;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  width: 1180px;
  height: 760px;
  max-width: 150vw;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(198, 169, 107, .26), rgba(0, 27, 101, 0) 66%);
  pointer-events: none;
}

/* ------------------------------------------------------- animated waveform */

.gcp__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: var(--gcp-wave-h);
  opacity: .42;
  pointer-events: none;
  z-index: 0;
}
/* Right to left, conveyor-belt style. The track holds two identical runs and
   travels exactly one run's width, so the loop point is invisible. */
.gcp__wave-track {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: max-content;
  animation: gcp-wave-scroll var(--scroll-dur, 40s) linear infinite;
  will-change: transform;
}
@keyframes gcp-wave-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--run, 50%))); }
}
/* Solid bars with rounded caps read as an audio meter; the old top-to-bottom
   fade made them look like a decorative gradient rather than levels. */
.gcp__wave i {
  display: block;
  flex: none;
  width: 2px;
  border-radius: 2px;
  transform-origin: bottom;
  background: var(--gcp-champagne);
  animation: gcp-wave var(--dur, 1s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes gcp-wave {
  from { transform: scaleY(.58); }
  to   { transform: scaleY(1); }
}

/* ------------------------------------------------------------------ layout */

.gcp__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 64px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(18px, 1.9vw, 26px) var(--gcp-gutter);
  min-height: 0;
  z-index: 1;
}

/* ---------------------------------------------------------------- lead col */

.gcp__lead { display: flex; flex-direction: column; gap: 12px; }

/* Baseline, not centre: the wordmark's ink runs to the bottom of its PNG, so
   aligning on the text baseline puts the logo's bottom edge and PRESENTS on
   the same line — centring left PRESENTS floating above it. */
.gcp__presents { display: flex; align-items: baseline; gap: 14px; }
.gcp__logo { height: 27px; width: auto; }
.gcp__divider { width: 1px; height: 27px; background: rgba(198, 169, 107, .5); }
.gcp__presents-label {
  font: 500 9.5px/1 var(--gcp-ui);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gcp-champagne);
  white-space: nowrap;
}

/* the word, with its offset outline sitting behind */
.gcp__word {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  /* cancels Archivo Black's left side bearing so the P aligns with the logo's G */
  margin-left: -4px;
  font: 400 clamp(46px, 5vw, 72px)/.9 var(--gcp-display);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--gcp-bone);
}
/* The offset gold outline behind the word. It used to be a second <span>
   holding the same text, which read as "Podcast Podcast" to anything parsing
   the page. Generated content keeps the look with one word in the DOM. */
.gcp__word-solid { position: relative; }
.gcp__word-solid::before {
  content: attr(data-echo);
  position: absolute;
  left: .152em;
  top: .152em;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(198, 169, 107, .8);
  white-space: nowrap;
  pointer-events: none;
}

.gcp__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 12px/1 var(--gcp-serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gcp-champagne);
}
/* ------------------------------------------------------------------- pair */

.gcp__pair { display: flex; align-items: flex-end; gap: 22px; padding: 0 50px; }

.gcp__portrait { position: relative; }
/* The card itself now carries the navy panel, border and radius. The <img> is
   a transparent cutout sitting on top of it — that separation is what lets the
   drop-shadow trace the white outline instead of haloing the rectangle. */
.gcp__portrait {
  width: 162px; height: 214px;
  border-radius: 16px;
  border: 2px solid rgba(198, 169, 107, .45);
  background: #001238;
  overflow: hidden;
}
.gcp__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: none;
}
/* Slow champagne glow, breathing in and out. drop-shadow follows the cutout's
   shape rather than the box, so it haloes the gold contour instead of putting a
   rectangle behind the photo. The two portraits are offset so they pulse out of
   step with each other. */
@keyframes gcp-glow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(255,255,255,.22)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,255,255,.55)); }
}
.gcp__portrait img { animation: gcp-glow 4.4s ease-in-out infinite; will-change: filter; }
.gcp__portrait--right img { animation-delay: -2.2s; }

@media (prefers-reduced-motion: reduce) {
  .gcp__portrait img { animation: none; filter: drop-shadow(0 0 9px rgba(255,255,255,.34)); }
}

/* ------------------------------------------------------------------- meta */

.gcp__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.gcp__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border: 1px solid rgba(198, 169, 107, .55);
  border-radius: 14px;
  text-align: center;
}
.gcp__badge-top, .gcp__badge-bot {
  font: 500 9.5px/1 var(--gcp-ui);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gcp__badge-top { color: var(--gcp-dim); }
.gcp__badge-bot { color: var(--gcp-champagne); }
.gcp__badge-mid {
  font: 600 13px/1 var(--gcp-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gcp-bone);
  white-space: nowrap;
}

.gcp__handle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--gcp-champagne);
  text-decoration: none;
  transition: opacity .2s ease;
}
.gcp__handle span {
  font: 600 13px/1 var(--gcp-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gcp-bone);
  white-space: nowrap;
}
.gcp__handle:hover { opacity: .75; }

/* ============================== responsive ============================== */

@media (max-width: 1100px) {
  .gcp__inner { grid-template-columns: 1fr auto; row-gap: 36px; }
  .gcp__meta { grid-column: 2; align-items: flex-end; }
}

@media (max-width: 860px) {
  .gcp__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 26px;
    padding-bottom: clamp(52px, 12vw, 72px);
  }
  .gcp { --gcp-wave-h: 66px; }
  .gcp__wave { opacity: .3; }
  .gcp__wave-track { gap: 3px; }

  .gcp__lead { align-items: center; gap: 14px; }
  .gcp__presents { justify-content: center; }
  .gcp__logo, .gcp__divider { height: 22px; }

  .gcp__word { align-self: center; margin-left: 0; }
  .gcp__word-solid::before { -webkit-text-stroke-width: 1.3px; }

  .gcp__kicker { letter-spacing: .3em; font-size: 11px; }

  .gcp__pair { gap: 14px; padding: 0; }
  .gcp__portrait { width: 111px; height: 150px; border-radius: 12px; }

  /* The 1100px rule pins the meta column to track 2. Single-column layout has
     no track 2, so leaving it pinned created an implicit second column and the
     banner stayed two-up (and clipped) on phones. */
  .gcp__meta { grid-column: 1; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gcp__wave i { animation: none; transform: scaleY(.72); }
  .gcp__wave-track { animation: none; }
}

/* Studio mic beside the season badge, sitting directly above the social icons.
   Outline weight matches the YouTube/Instagram glyphs below it. */
.gcp__meta-row { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.gcp__mic {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--gcp-champagne);
}
.gcp__mic svg { width: 62px; height: 62px; display: block; }

@media (max-width: 860px) {
  .gcp__meta-row { justify-content: center; }
  .gcp__mic svg { width: 48px; height: 48px; }
}

/* ------------------------------------------------------- clickable banner
   The whole panel opens the episode. The cover sits above the artwork but
   below the inner content, so the Instagram profile link keeps working and
   the text stays selectable where it matters. */
.gcp--linked { cursor: pointer; }
.gcp__cover {
  position: absolute; inset: 0; z-index: 3;
  display: block;
  /* no visual of its own: the hover treatment belongs to the panel */
  border: 0; background: none;
}
.gcp__cover:focus-visible {
  outline: 2px solid var(--gcp-champagne);
  outline-offset: -4px;
}
.gcp--linked .gcp__inner { position: relative; z-index: 4; pointer-events: none; }
/* give the real controls their clicks back */
.gcp--linked .gcp__inner a,
.gcp--linked .gcp__inner button { pointer-events: auto; }

/* a quiet lift so it reads as clickable */
.gcp--linked { transition: filter .3s var(--gc-ease, ease); }
.gcp--linked:hover { filter: brightness(1.025); }
.gcp--linked:hover .gcp__word-solid { text-shadow: 0 0 12px rgba(255, 255, 255, .09); }
@media (prefers-reduced-motion: reduce) { .gcp--linked { transition: none; } }