/* ==========================================================================
   MTD Performance - promo.css
   Loaded only by promo.html, after site.css. Every token, easing curve and
   entrance hook comes from site.css; nothing here redefines them. All class
   names are prefixed pr- so this file can never collide with site.css,
   shop.css, pages.css or events-edukasi.css.

   The page head (.pr-main, .pr-head, .pr-h2) is the events.html head component,
   copied here at the same values rather than linked, so promo.html loads
   site.css plus this file and nothing that belongs to two other pages.

   Table of contents
    1. Page head, section rhythm, the current nav link
    2. The live promo banner
    3. Badge, ribbon, period line, voucher code, terms
    4. Segera (upcoming) cards and the empty state
    5. Narrow screens
    6. Coarse pointer and reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Page head, section rhythm, the current nav link
   ========================================================================== */

/* The header is fixed and this page carries no hero under it. */
.pr-main{padding-top:var(--nav-h)}

/* the aria-current nav rules live in site.css and cover every page. */

.pr-head{
  position:relative;
  padding-block:clamp(38px,5vw,72px) clamp(26px,3vw,44px);
  border-bottom:1px solid var(--line);
}
.pr-head h1{
  font-style:italic;
  padding-bottom:.06em;          /* descender room under the masked reveal */
  font-size:clamp(40px,5.6vw,76px);
}
.pr-head .lede{margin-top:18px;max-width:58ch}

.pr-section{position:relative;padding-block:clamp(38px,4.6vw,66px)}
.pr-section + .pr-section{padding-top:clamp(10px,1.6vw,22px)}
.pr-section-soon{border-top:1px solid var(--line);margin-top:clamp(18px,2.4vw,34px)}

.pr-h2{
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.pr-h2 h2{font-size:clamp(26px,3vw,42px)}
.pr-h2 .pr-h2-num{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--accent-label);
}

/* ==========================================================================
   2. The live promo banner
   Full container width, text left, the product photo right on the chevron
   tile under one red glow. The banner is the loud element on this page, so
   the cards under it stay quiet.
   ========================================================================== */

.pr-banners{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}

.pr-banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;
  background:linear-gradient(178deg,var(--panel) 0%,#050505 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.pr-banner:hover{border-color:#4A4A4A;box-shadow:0 26px 48px -32px rgba(0,0,0,.95)}

.pr-banner-body{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;
  min-width:0;
  padding:clamp(22px,2.6vw,38px);
}

.pr-title{
  font-family:var(--display);
  font-weight:800;font-stretch:87%;font-style:italic;
  text-transform:uppercase;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.04;
  letter-spacing:-.012em;
  margin:0;
  padding-bottom:.04em;          /* descender room */
  max-width:18ch;
}

.pr-sub{font-size:15.5px;color:var(--text-primary);max-width:44ch}
.pr-desc{font-size:14.5px;color:var(--text-secondary);line-height:1.62;max-width:52ch}

.pr-banner .btn-row{margin-top:6px}

/* The media tile: the chevron texture, one red glow, the photo over both.
   The photo is contained so a portrait product shot is never cropped. */
.pr-banner-media{
  position:relative;
  min-height:240px;
  border-left:1px solid var(--line);
  background:#000 url("../img/brand/mtd-chevron.svg") 0 0/200px 120px repeat;
  isolation:isolate;
  overflow:hidden;
}
.pr-banner-media::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:radial-gradient(62% 58% at 68% 42%,rgba(233,32,42,.28) 0%,rgba(233,32,42,0) 72%);
}
.pr-photo{
  position:relative;z-index:2;
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(14px,1.8vw,26px);
}
/* a promo with no photo keeps its copy across the whole banner */
.pr-banner.pr-banner-nomedia{grid-template-columns:minmax(0,1fr)}

/* ==========================================================================
   3. Badge, ribbon, period line, voucher code, terms
   ========================================================================== */

.pr-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.pr-badge{
  display:inline-flex;align-items:center;
  padding:6px 11px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent-hover) 100%);
  color:var(--text-primary);
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

/* the local only marker on a sample entry: quiet, never mistaken for a badge */
.pr-ribbon{
  display:inline-flex;align-items:center;
  padding:6px 10px;
  border:1px dashed var(--line-interactive);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--text-secondary);
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}

.pr-period{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;
  font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  color:var(--text-secondary);
  border-top:1px solid var(--line);
  padding-top:14px;
  width:100%;
}
.pr-countdown{
  color:var(--accent-label);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* the voucher code: a mono chip with the copy button beside it */
.pr-code{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.pr-code-value{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:10px 16px;
  background:var(--panel-2);
  border:1px dashed var(--accent-muted);
  border-radius:8px;
  font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.22em;
  color:var(--text-primary);
}
.pr-copy{
  min-height:44px;
  padding:10px 16px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--line-interactive);
  border-radius:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-primary);
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out),
             background-color .26s var(--ease-out),transform .26s var(--ease-out);
}
.pr-copy:hover{border-color:var(--text-secondary);transform:translateY(-1px)}
.pr-copy:active{transform:translateY(0)}
.pr-copy.is-done{border-color:var(--accent);color:var(--accent-label)}

.pr-terms{
  width:100%;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.pr-terms > summary{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;gap:.6em;
  min-height:44px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:color .26s var(--ease-out);
}
.pr-terms > summary::-webkit-details-marker{display:none}
.pr-terms > summary::before{
  content:"";
  width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
  transition:transform .3s var(--ease-out);
}
.pr-terms[open] > summary::before{transform:rotate(45deg)}
.pr-terms > summary:hover{color:var(--text-primary)}
.pr-terms-list{
  margin:4px 0 10px;padding:0 0 0 20px;
  display:flex;flex-direction:column;gap:8px;
  color:var(--text-secondary);
  font-size:14px;line-height:1.55;
  max-width:56ch;
}

/* ==========================================================================
   4. Segera (upcoming) cards and the empty state
   Deliberately not the banner skeleton: three compact cards in a row.
   ========================================================================== */

.pr-soon{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.pr-soon-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(18px,2vw,24px);
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--accent-muted);
  border-radius:var(--radius);
  transition:border-color .4s var(--ease-out),transform .4s var(--ease-out);
}
.pr-soon-card:hover{transform:translateY(-3px);border-left-color:var(--accent);border-color:#4A4A4A}
.pr-soon-card h3{max-width:20ch}
.pr-soon-card .pr-period{border-top:0;padding-top:0}

.pr-empty{
  text-align:center;
  border-style:dashed;
}
.pr-empty h2{font-size:clamp(24px,2.6vw,36px);max-width:22ch;margin:0 auto}
.pr-empty p{color:var(--text-secondary);max-width:46ch;margin:16px auto 0}
.pr-empty .btn-row{margin-top:24px;justify-content:center}

/* ==========================================================================
   5. Narrow screens
   ========================================================================== */

@media (max-width:1080px){
  .pr-soon{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  /* the photo moves on top and takes a 16:9 band, the copy follows */
  .pr-banner{grid-template-columns:minmax(0,1fr)}
  .pr-banner-media{
    grid-row:1;
    min-height:0;
    aspect-ratio:16 / 9;
    border-left:0;
    border-bottom:1px solid var(--line);
  }
  .pr-title{max-width:none}
}

/* The fixed WhatsApp button lives in the bottom-right corner of the viewport.
   On a phone the banner is full width, so its copy stops short of that column
   instead of running underneath an opaque button. */
@media (max-width:560px){
  .pr-banner-body{padding-right:calc(clamp(22px,2.6vw,38px) + 24px)}
  .pr-soon-card{padding-right:calc(clamp(18px,2vw,24px) + 24px)}
}

@media (max-width:700px){
  .pr-soon{grid-template-columns:1fr}
  .pr-code{width:100%}
  .pr-code-value,.pr-copy{flex:1 1 auto;justify-content:center}
  .pr-banner .btn-row{width:100%}
  .pr-banner .btn-row > .btn{flex:1 1 220px}
}

/* ==========================================================================
   6. Coarse pointer and reduced motion
   ========================================================================== */

@media (pointer:coarse){
  .pr-copy,.pr-terms > summary{min-height:44px;display:inline-flex;align-items:center}
  .pr-terms > summary{display:flex}
  /* the shared nav controls are drawn at 42px; this page holds them to the
     44px floor without moving anything else in the header */
  .cart-link,.nav-burger{min-width:44px;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .pr-terms > summary::before{transition:none}
  .pr-banner,.pr-soon-card,.pr-copy{transition:none}
}

/* the same final states applied live when reduced motion flips on mid
   session; site.js adds body.pinned through pinToFinalStates() */
body.pinned .pr-terms > summary::before{transition:none}
body.pinned .pr-banner,
body.pinned .pr-soon-card,
body.pinned .pr-copy{transition:none}