/* THL Theme — lead-magnet clip landing pages (page-guide-clip.php).
   Ported from lead-magnets/bonding/mockups/adhesion-clip1-alleman.html.

   Loaded AFTER home.css, which supplies the rail, the course card, the
   membership band, the price card, the accreditation panel and the stat grid.
   Only this page's own parts live here, all `gc-` prefixed so nothing can
   collide with another template's component of the same name.

   🔴 NOTHING inc/price-card.php EMITS MAY BE STYLED HERE. Its CSS lives in
   style.css (the term note, the alternative plan, the CTA modifiers) and
   home.css (.price-card, .price-row, .price-cta, .price-foot). A rule here would
   apply on this page only and drift from the other twelve surfaces. */

/* ============================================================ */
/* HERO — the clip, pulled under the transparent nav             */
/* ============================================================ */
.gc-hero { position: relative; overflow: hidden; background: var(--ink); margin-top: calc(-1 * var(--nav-h)); }
.gc-hero-bg { position: absolute; inset: 0; }
.gc-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(0.8) brightness(0.68); transform: scale(1.2); }
.gc-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,21,0.7) 0%, rgba(10,13,21,0.52) 42%, var(--bg-deep) 100%);
}
.gc-hero-inner { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: calc(var(--nav-h) + 56px) 48px 60px; }
.gc-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
/* No lede between the headline and the player (Taylor, 8 Aug 2026): the visitor
   clicked a play icon in a PDF, so nothing stands between them and the clip. */
.gc-hero h1 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; max-width: 720px; margin: 0; }

.gc-stage { margin-top: 36px; }
.gc-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-lift); }
.gc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================ */
/* END-OF-CLIP CARD                                              */
/* ------------------------------------------------------------ */
/* Revealed on the player's `ended` event. The panel is FULLY     */
/* OPAQUE: a cross-origin iframe composites on its own layer, so  */
/* a translucent scrim (even at 0.9) lets the paused Vimeo frame  */
/* read straight through it.                                      */
/* ============================================================ */
.gc-end { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--ink); overflow: hidden; animation: gcEndIn 0.45s var(--ease-out) both; }
@keyframes gcEndIn { from { opacity: 0; } to { opacity: 1; } }
.gc-end-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(0.8) brightness(0.42); transform: scale(1.16); }
.gc-end::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,21,0.7) 0%, rgba(10,13,21,0.88) 100%); }
.gc-end-inner { position: relative; z-index: 2; width: 100%; max-width: 620px; }
.gc-end-card { display: flex; gap: 20px; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(122,175,201,0.3); border-radius: 15px; padding: 18px; }
.gc-end-art { width: 152px; flex-shrink: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,0.09); }
.gc-end-body { min-width: 0; }
.gc-end-title { font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 6px; }
.gc-end-meta { font-size: 12.5px; color: var(--t-soft); margin: 0 0 15px; }
.gc-end-actions { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.gc-end-actions .gc-cta { padding: 12px 20px; font-size: 11.5px; }
.gc-end-actions .gc-ghost { padding: 11px 17px; font-size: 11.5px; }

/* ============================================================ */
/* BUTTONS                                                       */
/* ============================================================ */
.gc-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); padding: 15px 28px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s var(--ease-out); box-shadow: 0 6px 22px rgba(122,175,201,0.22); }
.gc-cta svg { width: 14px; height: 14px; }
.gc-cta:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(122,175,201,0.32); }
.gc-cta--lg { padding: 17px 34px; font-size: 13px; }
.gc-ghost { display: inline-flex; align-items: center; gap: 9px; color: var(--t-strong); padding: 14px 24px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.28); font-size: 12.5px; font-weight: 600; transition: all 0.25s var(--ease); }
.gc-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }
.gc-ghost svg { width: 13px; height: 13px; }

/* ============================================================ */
/* CHIPS                                                         */
/* ============================================================ */
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gc-chips--card { margin-top: 0; margin-bottom: 16px; }
.gc-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t-mid); background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); padding: 6px 13px; border-radius: 999px; max-width: 100%; min-width: 0; }
.gc-chip svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }

/* ============================================================ */
/* WATCH THE FULL LECTURE                                        */
/* ============================================================ */
.gc-lecture { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 60px 48px; }
.gc-lecture-inner { max-width: 1040px; margin: 0 auto; }
.gc-kicker--band { margin-bottom: 18px; }
.gc-lec-card { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 17px; padding: 26px; }
/* The play button is a SIBLING of the artwork, never a child: .gc-art clips its
   own overflow (that is what rounds the image), so an overhanging button inside
   it is sliced at the bottom edge. Same structure as .card > .card-art. */
.gc-art-wrap { position: relative; }
.gc-art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.35); transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.gc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.gc-art-wrap .gc-play { position: absolute; bottom: -20px; right: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 4px #0f141d; transition: all 0.3s var(--ease-out); }
.gc-art-wrap .gc-play svg { width: 15px; height: 15px; fill: currentColor; transform: translateX(1px); }
@media (hover: hover) {
  .gc-lec-card:hover .gc-art { box-shadow: var(--shadow-lift); border-color: rgba(122,175,201,0.35); }
  .gc-lec-card:hover .gc-art img { filter: brightness(1.07); transform: scale(1.03); }
  .gc-lec-card:hover .gc-art-wrap .gc-play { background: var(--blue-bright); transform: scale(1.08); }
}
.gc-lec-body h2 { font-size: clamp(20px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin: 0 0 14px; }
.gc-lec-body h2 a:hover { color: var(--blue-bright); }
.gc-speaker { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.gc-avatars { display: flex; }
.gc-avatars img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(255,255,255,0.25); background: var(--navy-deep); }
.gc-avatars img + img { margin-left: -12px; }
.gc-names { font-size: 14.5px; font-weight: 600; }
.gc-where { display: block; font-size: 12px; font-weight: 400; color: var(--t-soft); margin-top: 1px; }
.gc-desc { font-size: 14px; color: var(--t-mid); line-height: 1.7; margin: 0 0 22px; }
.gc-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gc-note { font-size: 12.5px; color: var(--t-soft); margin: 0; }
.gc-note a { color: var(--blue-bright); }
.gc-note a:hover, .gc-note a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ */
/* PATHWAY RAIL — home.css does the work; these are the overlays */
/* ------------------------------------------------------------ */
/* Both sit in the theme's existing top-right .card-tags cluster. */
/* NOT top-left: every Canva artwork carries its own duration     */
/* badge there, and anything placed over it collides.             */
/* ============================================================ */
.gc-rail { background: var(--bg); border-top: 1px solid var(--line); padding-top: 62px; }
.card-step { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue-bright); background: rgba(13,17,25,0.85); border: 1px solid rgba(122,175,201,0.35); padding: 4px 10px; border-radius: 999px; }
.card-here { font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-deeper); background: var(--blue-bright); padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }

/* ============================================================ */
/* THE LIBRARY                                                   */
/* ============================================================ */
.gc-library { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 72px 48px; }
.gc-library-inner { max-width: 1100px; margin: 0 auto; }
.gc-library h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.gc-lede { font-size: 15px; color: var(--t-mid); line-height: 1.7; max-width: 660px; margin: 0; }
.gc-stats { margin: 38px 0 44px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gc-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.gc-topic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); }
.gc-topic-name { font-size: 14px; font-weight: 600; color: var(--t-mid); }
.gc-topic-n { font-size: 12px; font-weight: 700; color: var(--blue-bright); background: rgba(122,175,201,0.12); padding: 3px 10px; border-radius: 999px; flex-shrink: 0; }
@media (hover: hover) {
  .gc-topic:hover { border-color: rgba(122,175,201,0.4); background: rgba(122,175,201,0.07); transform: translateX(2px); }
  .gc-topic:hover .gc-topic-name { color: var(--t-strong); }
}
.gc-library-foot { margin-top: 26px; }
.gc-library-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--t-mid); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s var(--ease), gap 0.25s var(--ease); }
.gc-library-foot a:hover { color: var(--blue-bright); gap: 12px; }
.gc-library-foot svg { width: 13px; height: 13px; }

/* ============================================================ */
/* MEMBERSHIP — band from home.css, one correction                */
/* ------------------------------------------------------------ */
/* home.css floats the homepage band with margin-top:30px, which  */
/* here would show a 30px strip of --bg between the library band   */
/* and the membership gradient (three shades stacked = a seam).    */
/* ============================================================ */
.page-template-page-guide-clip .membership { margin-top: 0; border-top: 1px solid var(--line); }
.gc-lock { margin-top: 26px; max-width: 460px; background: rgba(122,175,201,0.07); border: 1px solid rgba(122,175,201,0.2); border-radius: 13px; padding: 18px 22px; font-size: 13px; color: var(--t-mid); line-height: 1.65; }
.gc-lock strong { color: var(--t-strong); font-weight: 600; }
/* .membership h2 / .lede / .member-list already come from home.css. */

/* ============================================================ */
/* ACCREDITATION + FINAL CTA                                     */
/* ============================================================ */
.gc-accred { padding-top: 60px; padding-bottom: 60px; }
.gc-accred-note { max-width: 880px; margin: 16px auto 0; font-size: 12px; color: var(--t-soft); line-height: 1.7; }
.gc-accred-note a { color: var(--blue-bright); }
.gc-accred-note a:hover, .gc-accred-note a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.gc-final { padding: 88px 48px; background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(122,175,201,0.1) 0%, transparent 60%), var(--bg-deep); border-top: 1px solid var(--line); text-align: center; }
.gc-final h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.gc-final p { font-size: 15px; color: var(--t-mid); max-width: 560px; margin: 0 auto 32px; line-height: 1.65; }
.gc-final-sub { margin: 18px auto 0; font-size: 12px; color: var(--t-soft); }

/* ============================================================ */
/* MOBILE STICKY ACTION BAR                                      */
/* ============================================================ */
.gc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px calc(11px + env(safe-area-inset-bottom)); background: rgba(12,16,24,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform 0.35s var(--ease); }
.gc-bar.show { transform: translateY(0); }
.gc-bar-info { font-size: 13px; color: var(--t-mid); line-height: 1.3; min-width: 0; }
.gc-bar-info strong { display: block; font-size: 15px; font-weight: 700; color: var(--t-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bar-sub { display: block; font-size: 11px; color: var(--t-soft); }
.gc-bar-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--navy-deeper); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 20px; border-radius: 9px; }
.gc-bar-cta:active { background: var(--blue-bright); }
@media (max-width: 768px) { .gc-bar { display: flex; } }

/* ============================================================ */
/* BREAKPOINTS                                                   */
/* ============================================================ */
@media (max-width: 1020px) {
  .gc-hero-inner { padding: calc(var(--nav-h) + 40px) 24px 48px; }
}
@media (max-width: 900px) { .gc-topics { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
  .gc-lecture { padding: 52px 24px; }
  .gc-lec-card { grid-template-columns: 1fr; gap: 26px; padding: 20px; }
  .gc-art-wrap { max-width: 380px; }
}
@media (max-width: 760px) {
  .gc-library { padding: 52px 24px; }
  .gc-final { padding: 62px 24px; }
}
/* On a phone the 16:9 well is only ~190px tall, far shorter than the end card,
   so the card would be clipped by the frame. Below 700px the card sizes the
   frame instead of the other way round: it goes back into flow and the player
   sits behind it, so the panel still appears in the same rectangle uncut. */
@media (max-width: 700px) {
  .gc-end { padding: 18px; }
  .gc-end-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 15px; }
  .gc-end-art { width: 100%; max-width: 190px; }
  .gc-frame.is-ended { aspect-ratio: auto; }
  .gc-frame.is-ended .gc-end { position: relative; inset: auto; min-height: 52vw; }
}
@media (max-width: 560px) {
  .gc-actions { align-items: stretch; flex-direction: column; }
  .gc-actions .gc-cta { justify-content: center; }
}
@media (max-width: 480px) {
  .gc-end-art { display: none; }
  .gc-end-title { font-size: 14.5px; }
  .gc-end-actions .gc-cta, .gc-end-actions .gc-ghost { width: 100%; justify-content: center; }
}