/* ==========================================================================
   GBM Studies — Prototype 01 "Emerald Charter" — programmes catalogue
   Builds on tokens.css + site.css + course.css (boot, reveals, dialogs,
   toast, sticky bar). Animates transform/opacity only.
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.p-hero {
  position: relative; overflow: hidden; color: var(--ivory-50); padding: 8.5rem 0 4.2rem;
  background: radial-gradient(70% 90% at 85% 10%, rgba(27,90,64,.55), transparent 70%), var(--emerald-950);
}
.p-hero::after { content: ""; position: absolute; right: -120px; top: 50%; width: 520px; height: 520px; margin-top: -260px; border-radius: 50%; background: url("../assets/logo_certificate.png") center / contain no-repeat; opacity: .05; pointer-events: none; }
.p-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .9fr; gap: 3.5rem; align-items: end; }
.p-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.7rem, 1.6rem + 4vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; }
.p-title em { font-style: italic; }
.p-lead { margin-top: 1.2rem; max-width: 50ch; font-size: var(--fs-lead); color: rgba(246,238,219,.75); }
.p-search { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; max-width: 560px; height: 58px; padding: 0 1rem 0 1.25rem; border-radius: var(--radius-pill); background: rgba(246,238,219,.06); box-shadow: inset 0 0 0 1px var(--line-dark); transition: box-shadow .3s, background-color .3s; }
.p-search:focus-within { background: rgba(246,238,219,.1); box-shadow: inset 0 0 0 1px var(--gold-400), 0 0 0 4px rgba(197,161,90,.15); }
.p-search i { color: var(--gold-400); }
.p-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ivory-50); font: inherit; font-size: 1rem; }
.p-search input::placeholder { color: rgba(246,238,219,.45); }
.p-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.p-search kbd { font-family: var(--font-mono); font-size: .74rem; padding: .15rem .5rem; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-dark); color: rgba(246,238,219,.5); }
.p-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--radius-lg); overflow: hidden; background: var(--line-dark); }
.p-facts li { padding: 1.3rem 1.2rem; background: rgba(3,17,11,.85); }
.p-facts b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--gold-300); margin-bottom: .35rem; }
.p-facts b i { font-size: .8em; }
.p-facts span { font-size: .84rem; color: rgba(246,238,219,.65); }
.p-facts s { opacity: .6; }

/* ---------- Sticky toolbar (reuses .c-tabs sticky/shift behaviour) ---------- */
.p-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.p-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .6rem 0; }
.p-chips::-webkit-scrollbar { display: none; }
.p-chips button { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: var(--radius-pill); font-size: .86rem; color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-light); transition: background-color .3s, color .3s, box-shadow .3s; }
.p-chips button i { font-size: .8rem; color: var(--emerald-600); transition: color .3s; }
.p-chips button:hover { box-shadow: inset 0 0 0 1px var(--gold-500); }
.p-chips button[aria-selected="true"] { background: var(--emerald-900); color: var(--ivory-50); box-shadow: none; }
.p-chips button[aria-selected="true"] i { color: var(--gold-300); }
.p-sort { display: flex; align-items: center; gap: .9rem; flex: none; font-size: .86rem; color: var(--ink-500); }
.p-sort select { height: 40px; padding: 0 2.2rem 0 .9rem; border-radius: var(--radius-pill); border: 0; font: inherit; font-size: .86rem; color: var(--ink-900); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232b3631' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center; box-shadow: inset 0 0 0 1px var(--line-light); appearance: none; cursor: pointer; }
.p-sort select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* ---------- Catalogue ---------- */
.p-list { background: var(--ivory-100); padding: 3rem 0 var(--section-y); }
.p-goals { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2.2rem; }
.p-goals__label { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; margin-right: .3rem; color: var(--emerald-700); }
.p-goals button { padding: .45rem .9rem; border-radius: var(--radius-pill); font-size: .9rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line-light); transition: transform .35s var(--ease-out), box-shadow .3s; }
.p-goals button:hover { transform: translate3d(0, -2px, 0); box-shadow: inset 0 0 0 1px var(--gold-500), var(--shadow-sm); }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

.p-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--ivory-50); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-light); transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.p-card:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(197,161,90,.45); }
.p-card[hidden] { display: none; }
.js .p-card.rv { transition: opacity .8s var(--ease-out) var(--rd, 0s), transform .6s var(--ease-out) var(--rd, 0s), box-shadow .5s var(--ease-out); }
.js .p-card.is-in:hover { transform: translate3d(0, -6px, 0); }
.p-card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.p-card__link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.p-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.1s var(--ease-out); }
.p-card:hover .p-card__media img { transform: scale(1.1); }
.p-card__badge { position: absolute; left: 12px; top: 12px; padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 500; background: rgba(3,17,11,.78); color: var(--gold-300); }
.p-card__badge i { margin-right: .3rem; }
.p-card__rate { position: absolute; right: 12px; top: 12px; padding: .3rem .6rem; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; background: #fff; }
.p-card__rate i { color: var(--gold-600); margin-right: .2rem; }
.p-card__body { padding: 1.3rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.p-card__cats { display: flex; flex-wrap: wrap; gap: .35rem; }
.p-card__cats span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: var(--radius-xs); background: rgba(35,112,79,.08); color: var(--emerald-600); }
.p-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.12; }
.p-card__tag { font-size: .9rem; color: var(--ink-500); }
.p-card__facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--ink-500); padding-top: .8rem; margin-top: auto; border-top: 1px solid var(--line-light); }
.p-card__facts i { color: var(--gold-600); margin-right: .35rem; }
.p-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.p-card__price b { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.p-card__price s { margin-left: .45rem; font-size: .85rem; color: var(--ink-300); }
.p-cmp { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 500; color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-light); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.p-cmp input { appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-300); display: grid; place-items: center; transition: background-color .25s, box-shadow .25s; cursor: pointer; }
.p-cmp input::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .55rem; color: var(--emerald-950); opacity: 0; }
.p-cmp input:checked { background: var(--gold-400); box-shadow: none; }
.p-cmp input:checked::after { opacity: 1; }
.p-cmp:has(input:checked) { background: var(--emerald-900); color: var(--ivory-50); box-shadow: none; }
.p-cmp:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.p-card.is-highlight { animation: pHighlight 2.2s var(--ease-out); }
@keyframes pHighlight { 0%, 100% { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-light); } 20%, 60% { box-shadow: 0 0 0 4px rgba(197,161,90,.55), var(--shadow-lg); } }

.p-card--soon { background: var(--grad-emerald); color: var(--ivory-50); padding: 1.8rem; justify-content: space-between; gap: 1.4rem; }
.p-card--soon h3 { font-size: 2rem; }
.p-card--soon h3 em { font-style: italic; color: var(--gold-300); }
.p-card--soon p { color: rgba(246,238,219,.72); font-size: .92rem; }
.p-card--soon ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-card--soon li { font-size: .76rem; padding: .3rem .7rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-dark); }
.p-card--soon .p-card__link span { position: absolute; right: 1.6rem; bottom: 1.6rem; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--emerald-950); }

.p-empty { text-align: center; padding: 4rem 1rem; color: var(--ink-500); }
.p-empty > i { font-size: 2rem; color: var(--gold-600); margin-bottom: 1rem; }
.p-empty h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; color: var(--ink-900); margin-bottom: .6rem; }
.p-empty button { color: var(--emerald-700); font-weight: 500; border-bottom: 1px solid currentColor; }

/* ---------- Coming soon ---------- */
.p-soon { background: var(--emerald-900); color: var(--ivory-50); padding: var(--section-y) 0; }
.p-soon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.p-soon .h2 { margin: 1rem 0 1.2rem; }
.p-soon .h2 em { color: var(--gold-300); }
.p-soon__lead { color: rgba(246,238,219,.72); max-width: 46ch; }
.p-notify { display: flex; gap: .6rem; margin-top: 1.8rem; max-width: 500px; }
.p-notify input { flex: 1; min-width: 0; height: 54px; padding: 0 1.2rem; border-radius: var(--radius-pill); border: 0; outline: 0; background: rgba(3,17,11,.6); color: var(--ivory-50); font: inherit; box-shadow: inset 0 0 0 1px var(--line-dark); transition: box-shadow .3s; }
.p-notify input::placeholder { color: rgba(246,238,219,.4); }
.p-notify input:focus { box-shadow: inset 0 0 0 1px var(--gold-400), 0 0 0 4px rgba(197,161,90,.15); }
.p-notify input.is-bad { box-shadow: inset 0 0 0 1px #ff8a7a; }
.p-notify__msg { min-height: 1.5em; margin-top: .7rem; font-size: .88rem; color: var(--gold-300); }
.p-notify__msg.is-bad { color: #ff9f92; }
.p-soon__list { display: grid; gap: .6rem; }
.p-soon__list li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-md); background: rgba(246,238,219,.04); box-shadow: inset 0 0 0 1px var(--line-dark); transition: transform .45s var(--ease-out), background-color .3s; }
.p-soon__list li:hover { transform: translate3d(6px, 0, 0); background: rgba(246,238,219,.08); }
.p-soon__list i { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-gold); color: var(--emerald-950); }
.p-soon__list b { display: block; font-weight: 500; }
.p-soon__list span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }

/* ---------- Compare tray + dialog ---------- */
.p-tray {
  position: fixed; left: 50%; bottom: 20px; z-index: 46; display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem .55rem .7rem;
  border-radius: var(--radius-pill); background: var(--emerald-950); color: var(--ivory-50); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-dark);
  transform: translate3d(-50%, 140%, 0); transition: transform .55s var(--ease-out);
}
.p-tray.is-on { transform: translate3d(-50%, 0, 0); }
.p-tray__picks { display: flex; }
.p-tray__picks img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-left: -10px; box-shadow: 0 0 0 2px var(--emerald-950); }
.p-tray__picks img:first-child { margin-left: 0; }
.p-tray__hint { font-size: .84rem; color: rgba(246,238,219,.75); white-space: nowrap; }
.p-tray__clear { font-size: .8rem; color: rgba(246,238,219,.6); border-bottom: 1px solid rgba(246,238,219,.3); }
.p-tray .btn[disabled] { opacity: .5; pointer-events: none; }
.p-compare { width: min(980px, calc(100% - 2rem)); }
.p-compare__scroll { overflow-x: auto; max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.p-compare__table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9rem; }
.p-compare__table th, .p-compare__table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-light); }
.p-compare__table thead th { position: sticky; top: 0; z-index: 1; background: #fffdf8; vertical-align: bottom; }
.p-compare__table thead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: .6rem; }
.p-compare__table thead b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; }
.p-compare__table tbody th { width: 150px; font-family: var(--font-mono); font-weight: 400; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.p-compare__table td i.fa-check { color: var(--emerald-600); }
.p-compare__table td .btn { margin-top: .2rem; }
.p-compare__table .best { color: var(--emerald-600); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .p-grid { grid-template-columns: 1fr 1fr; }
  .p-hero__grid { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .p-facts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .p-bar__inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .6rem; }
  .p-sort { justify-content: space-between; }
  .p-facts { grid-template-columns: 1fr 1fr; }
  .p-soon__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .p-tray { left: 12px; right: 12px; transform: translate3d(0, 140%, 0); }
  .p-tray.is-on { transform: none; }
  .p-tray__hint { flex: 1; white-space: normal; font-size: .78rem; }
}
@media (max-width: 600px) {
  .p-grid { grid-template-columns: 1fr; }
  .p-notify { flex-direction: column; }
  .p-notify input { flex: none; width: 100%; }
  .p-notify .btn { justify-content: center; }
  .p-search kbd { display: none; }
  .p-goals__label { width: 100%; }
}