/* Premium first screen on pages built on courses-style.css: membership and the catalogue.
   Owner decision 2026-10-10: the brand-guide exception of the two advertising pages is extended to
   these first screens only. The engine is css/education-premium.css; this file holds the bridge to
   the other page shell and the hero objects of these pages.
   Surfaces stay matte: no gradient, sheen or blur on a card. The glow lives in the hero background only. */

/* ── Bridge ───────────────────────────────────────────────────────────── */
/* The wrapper borrows .el-main for its resets; the room it leaves for the bottom rail is not needed here. */
.ph-scope.el-main { padding-bottom:0; }
/* courses-style.css draws a pale rule under every <section>; the block below is dark too, so the
   hero closes with the same gold hairline it opens with. */
.ph-scope .ep-hero { border-bottom:1px solid var(--el-gold); }
/* Same column as .container of these pages (1280px, 24px gutters): the hero text starts exactly
   above the section titles below and under the logo. */
.ph-scope .el-wrap { width:min(1280px,100%); padding-inline:24px; }

/* ── Photo first screen (membership) ──────────────────────────────────── */
/* Owner, 2026-10-10: a photograph instead of the animated background; the object on the right stays.
   The veil belongs to the hero background, not to a surface: darker on the left, under the text. */
.ph-scope .ep-hero.ph-photo { background:linear-gradient(100deg,rgba(19,5,38,.93) 0%,rgba(19,5,38,.8) 45%,rgba(31,10,61,.46) 100%), var(--ep-deep) url('../img/membership-bg.jpg') 70% center / cover no-repeat; }

/* Catalogue: the photograph this page already had, under the same veil. */
.ph-scope .ep-hero.ph-photo-edu { background-image:linear-gradient(100deg,rgba(19,5,38,.93) 0%,rgba(19,5,38,.8) 45%,rgba(31,10,61,.46) 100%), url('../img/main-bg.webp'); background-position:0 0, center; }
/* Corporate membership: the photograph this page already had, under the same veil. */
.ph-scope .ep-hero.ph-photo-corp { background-image:linear-gradient(100deg,rgba(19,5,38,.93) 0%,rgba(19,5,38,.8) 45%,rgba(31,10,61,.46) 100%), url('../img/corp-bg-new.webp'); background-position:0 0, top center; }
/* Third, quiet action under the two buttons. The padding gives the line a finger-sized target. */
.el-premium .ph-hero-more { margin-top:10px; font-size:15px; line-height:1.4; }
.ph-scope .ph-hero-more a { display:inline-block; padding-block:10px; color:var(--el-white); text-decoration:underline; text-underline-offset:4px; transition:color .25s; }
.ph-scope .ph-hero-more a:hover { color:var(--el-gold); }

/* ── Member card: the letters after the name are what membership gives ── */
.ep-member-stage { align-content:center; row-gap:40px; }
.ep-stage .ep-member-tilt { width:min(100%,460px); aspect-ratio:460 / 290; }
.ep-member-tilt .ep-cred-ghost { border-radius:16px; transform:translate3d(-22px,18px,-80px) rotate(-4deg); }
.ep-member { position:absolute; inset:0; display:flex; flex-direction:column; padding:28px 30px 24px; border:1px solid rgba(192,165,130,.6); border-radius:16px; color:var(--el-white);
  background:#1c0938; box-shadow:0 28px 56px rgba(6,1,16,.5); transform-style:preserve-3d; }
.ep-member::before { content:""; position:absolute; inset:12px; border:1px solid rgba(192,165,130,.34); border-radius:9px; transform:translateZ(8px); pointer-events:none; }
/* Brand arrow as a watermark, the way it sits in the corner of the fact cards. */
.ep-member-mark { position:absolute; top:50%; right:42px; width:132px; height:132px; margin-top:-66px; color:var(--el-gold); opacity:.1; rotate:45deg; transform:translateZ(14px); }
/* Same depth as the head above it, so their left edges stay on one line when the card rests. */
.ep-member-id { margin-top:auto; transform:translateZ(46px); }
.ep-member-id > span { display:block; margin-bottom:8px; color:var(--el-gold); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.el-premium .ep-member-id p { color:var(--el-white); font-size:30px; font-weight:700; line-height:1.15; letter-spacing:-.01em; white-space:nowrap; }
.ep-member-id b { color:var(--el-gold); font-weight:700; }
.ep-member-foot { display:flex; justify-content:space-between; gap:16px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(192,165,130,.34); transform:translateZ(30px); }
.ep-member-foot span { color:var(--ep-dim); font-size:12px; line-height:1.4; }

/* ── Path under the card: three grades, the top one in gold ───────────── */
/* The rule above each name is one continuous track; the order reads left to right without arrows. */
.ep-member-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,460px); margin:0; padding:0; list-style:none; }
.el-premium .ep-member-path li { padding-top:12px; border-top:2px solid var(--ep-hair); color:var(--ep-dim); font-size:13px; font-weight:600; line-height:1.35; }
.el-premium .ep-member-path li.is-top { border-top-color:var(--el-gold); color:var(--el-white); font-weight:700; }

/* ── Corporate certificate: the member card as a wall certificate with the company's name ── */
/* Owner, 2026-10-11: the object is the named certificate a corporate member hangs in the office.
   It reuses the member card; a round seal and a longer name line tell it apart. */
.ep-corp-seal { position:absolute; top:26px; right:28px; display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--el-gold); border-radius:50%; color:var(--el-gold); transform:translateZ(46px); }
.ep-corp-seal::before { content:""; position:absolute; inset:5px; border:1px solid rgba(192,165,130,.5); border-radius:50%; }
.ep-corp-seal svg { width:20px; height:20px; rotate:45deg; }
/* The seal takes the corner, so the watermark arrow moves to the lower half. */
.ep-corp .ep-member-mark { top:58%; }

/* ── Fan of documents (catalogue): three official names, the diploma in front ── */
/* One unit (--u) scales the whole object with its column, so each name keeps its room at every width.
   The side sheets show a strip along their outer edge; their names sit inside that strip. */
.ep-fan-stage { container-type:inline-size; align-content:center; row-gap:30px; }
.ep-stage .ep-fan-tilt, .ep-fan-note { --u:min(1cqw,4.7px); width:calc(var(--u) * 91.5); }
.ep-stage .ep-fan-tilt { aspect-ratio:430 / 346; }
/* Who stands behind the documents: one line under the fan, as wide as the fan (owner, 2026-10-11). */
.el-premium .ep-fan-note { margin:0; padding-top:14px; border-top:1px solid var(--ep-hair); color:var(--el-white); font-size:14px; line-height:1.5; text-wrap:pretty; }
.ep-doc { position:absolute; top:0; width:49%; aspect-ratio:211 / 312; border:1px solid rgba(192,165,130,.6); border-radius:calc(var(--u) * 3); color:var(--el-white);
  background:#1c0938; box-shadow:0 18px 36px rgba(6,1,16,.4); }
.ep-doc::before { content:""; position:absolute; inset:calc(var(--u) * 2.2); border:1px solid rgba(192,165,130,.34); border-radius:calc(var(--u) * 1.7); pointer-events:none; }
/* The scene is turned a few degrees, which narrows the left strip: the left sheet stands further out to match. */
.ep-doc-left { --ep-fan-from:62%; left:-6%; top:5%; transform:translateZ(-60px) rotate(-8deg); }
.ep-doc-right { --ep-fan-from:-54%; left:51%; top:5%; transform:translateZ(-60px) rotate(8deg); }
/* The flagship is told apart by place and colour, not by size. */
.ep-doc-main { left:24.5%; display:flex; flex-direction:column; padding:calc(var(--u) * 4.8); border-color:var(--el-gold); background:var(--el-purple); box-shadow:0 28px 56px rgba(6,1,16,.5); transform-style:preserve-3d; }
.ep-doc-main::before { transform:translateZ(8px); }
/* min-content: one word per line, so the block is exactly as wide as «International». */
.ep-doc-side { position:absolute; top:calc(var(--u) * 4.8); left:calc(var(--u) * 4.4); width:min-content; }
.ep-doc-right .ep-doc-side { left:auto; right:calc(var(--u) * 4.4); }
.ep-doc-side img { display:block; width:calc(var(--u) * 6.4); height:auto; margin-bottom:calc(var(--u) * 2.6); }
.el-premium .ep-doc-side p { color:var(--el-white); font-size:max(12px,calc(var(--u) * 3)); font-weight:700; line-height:1.25; }
.ep-doc-logo { display:block; width:calc(var(--u) * 9.4); height:auto; transform:translateZ(40px); }
/* Brand arrow as a watermark, as on the member card. */
.ep-doc-mark { position:absolute; top:22%; right:calc(var(--u) * 5); width:calc(var(--u) * 17); height:calc(var(--u) * 17); color:var(--el-gold); opacity:.12; rotate:45deg; transform:translateZ(14px); }
.ep-doc-name { margin-top:auto; transform:translateZ(46px); }
.el-premium .ep-doc-name p { color:var(--el-white); font-size:calc(var(--u) * 5); font-weight:700; line-height:1.12; letter-spacing:-.01em; }
.ep-doc-name em { display:block; margin-top:calc(var(--u) * 1.6); color:var(--ep-on-dark); font-size:max(11px,calc(var(--u) * 2.8)); font-style:normal; line-height:1.4; text-wrap:balance; }
.ep-doc-foot { margin-top:calc(var(--u) * 3.2); padding-top:calc(var(--u) * 2.6); border-top:1px solid rgba(192,165,130,.34); transform:translateZ(30px); }
.ep-doc-foot span { display:block; color:var(--ep-dim); font-size:max(11px,calc(var(--u) * 2.5)); line-height:1.4; }

@media (prefers-reduced-motion:no-preference) {
  .ep-member-path { animation:ep-fade-up .9s var(--ep-out) .6s both; }
}

@media (prefers-reduced-motion:no-preference) {
  .ph-hero-more { animation:ep-fade-up .9s var(--ep-out) .54s both; }
  .ep-fan-note { animation:ep-fade-up .9s var(--ep-out) .7s both; }
  /* The side sheets start behind the diploma and open once. */
  .ep-doc-left, .ep-doc-right { animation:ep-fan-open 1.1s var(--ep-out) .45s both; }
}
@keyframes ep-fan-open { from { transform:translate3d(var(--ep-fan-from),-5%,-60px) rotate(0deg); } }

@media (max-width:1359px) {
  .ep-member { padding:24px 26px 20px; }
  .ep-member-mark { right:34px; width:112px; height:112px; margin-top:-56px; }
  .el-premium .ep-member-id p { font-size:26px; }
  .ep-member-foot { margin-top:14px; padding-top:12px; }
}
@media (max-width:1099px) {
  /* Narrow column: «Chartered Member» keeps to one line, so the three names stay on one baseline. */
  .el-premium .ep-member-path li { font-size:12px; }
}
@media (max-width:1023px) {
  /* One column: the object sits under the copy, on the left edge like the text above it. */
  .ep-member-stage { justify-items:start; height:auto; padding-block:16px 28px; }
  /* The fan starts where its tilted left sheet meets the text edge. */
  .ep-fan-stage { justify-items:start; height:auto; padding-block:16px 36px; }
  .ep-stage .ep-fan-tilt, .ep-fan-note { margin-left:calc(var(--u) * 4.4); }
}
@media (max-width:767px) {
  .ep-member-stage { row-gap:26px; padding:8px 14px 28px 4px; }
  .ep-stage .ep-member-tilt { width:min(100%,340px); aspect-ratio:460 / 310; }
  .ep-member { padding:20px 22px 18px; }
  .ep-member .ep-cred-head img { width:38px; height:38px; }
  .ep-member-mark { right:24px; width:96px; height:96px; margin-top:-48px; }
  .el-premium .ep-member-id p { font-size:23px; }
  .ep-member-path { width:min(100%,340px); gap:6px; }
  /* Phone: the fan takes the full column; the engine's card proportions do not apply to it. */
  .ep-fan-stage { padding:8px 0 30px; }
  .ep-stage .ep-fan-tilt, .ep-fan-note { --u:1.04cqw; margin-left:calc(var(--u) * 2.4); }
  .ep-fan-stage { row-gap:24px; }
  /* The names stop shrinking at 12px, so the sheets overlap less here to keep the same room for them. */
  .ep-doc { width:47%; }
  .ep-doc-left { --ep-fan-from:71%; left:-8%; }
  .ep-doc-main { left:25.5%; }
  .ep-doc-right { --ep-fan-from:-63%; left:55%; }
  .ep-doc-right .ep-doc-side { right:calc(var(--u) * 3.2); }
}

/* Corporate certificate: the company name is longer than a member's, so its size follows the card.
   These rules stay last: the member card sets its own name size in the queries above. */
.el-premium .ep-corp-id p { font-size:27px; }
@media (max-width:1359px) { .el-premium .ep-corp-id p { font-size:24px; } }
@media (max-width:1099px) { .el-premium .ep-corp-id p { font-size:22px; } }
@media (max-width:1023px) { .el-premium .ep-corp-id p { font-size:26px; } }
@media (max-width:767px) {
  /* Phone: the name takes two lines; the seal would sit on the institute's name, so it is dropped. */
  .el-premium .ep-corp-id p { font-size:21px; line-height:1.2; white-space:normal; }
  .ep-corp-seal { display:none; }
  /* A little taller than the member card, so the two-line name keeps its air under the head. */
  .ep-stage .ep-member-tilt.ep-corp-tilt { aspect-ratio:460 / 350; }
  .ep-corp .ep-member-mark { top:50%; }
}