/* ==========================================================================
   ADD-ONS INDEX (is_page('add-ons')) - scoped under .addons-
   Shared vocabulary lives in main.css and is composed in markup; this file
   only adds what the add-ons lineup cannot express with shared classes.
   Tokens only - never raw hexes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lineup grid - one card per entry in venuera_addons()
   -------------------------------------------------------------------------- */
.addons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}

/* whole card is an <a> built on .v-card - column flex pins the footer link */
.addons-card{display:flex;flex-direction:column;height:100%;color:var(--text);text-decoration:none}
.addons-card:hover{color:var(--text)}

.addons-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.addons-card-top .v-card-ic{margin-bottom:0}

/* free-core card - the featured card, so it earns the brand-gradient border */
.addons-card-free{border-color:transparent}
.addons-card-free::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1.5px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* "Free - in the core" badge, tinted from the success token */
.addons-badge-free{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-color:transparent}

.addons-tag{margin:0 0 16px}

/* top-3 feature titles pulled from the add-on's data */
.addons-feats{display:grid;gap:8px;margin:0 0 22px}
.addons-feats li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:500;color:var(--muted)}
.addons-feats svg{flex:0 0 auto;width:15px;height:15px;margin-top:3px;color:var(--green)}

/* card footer link */
.addons-go{margin-top:auto;display:flex;align-items:center;gap:7px;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:15px;color:var(--violet)}
.addons-go .v-arrow{transition:transform .16s}
.addons-card:hover .addons-go{color:var(--violet-d)}
.addons-card:hover .addons-go .v-arrow{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   All-Access season pass - .v-ticket on the dark bundle section.
   The ticket is paper on ink, so text colors are re-anchored to light tokens.
   -------------------------------------------------------------------------- */
.addons-pass{display:grid;grid-template-columns:1.65fr 2px 1fr;color:var(--text)}
.addons-pass p{color:var(--text)}
.addons-pass-main{padding:30px 28px}
.addons-pass-main .v-mono{color:var(--muted)}
.addons-pass-price{font-family:var(--display);font-weight:700;font-size:46px;line-height:1;
  letter-spacing:-.03em;color:var(--ink);margin:14px 0 6px}
.addons-pass-price span{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted)}
.addons-pass-alt{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.addons-pass-inc{font-size:14px;line-height:1.6;margin:10px 0 0}
.addons-pass-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:26px 22px;text-align:center;background:var(--paper-soft)}
.addons-pass-stub .v-mono{color:var(--ink)}
.addons-pass-stubnote{font-size:12.5px;color:var(--muted);margin:0}
.addons-pass-qr{display:block;line-height:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 4px 14px rgba(20,18,31,.08);
  transition:transform .25s ease,box-shadow .25s ease}
.addons-pass-qr:hover{transform:scale(1.05);box-shadow:0 8px 22px rgba(20,18,31,.14)}
.addons-pass-qr img{display:block;width:84px;height:84px}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .addons-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .addons-pass-main{padding:26px 22px}
  .addons-pass-price{font-size:40px}
}
@media(max-width:620px){
  .addons-grid{grid-template-columns:1fr}
  .addons-pass{grid-template-columns:1fr}
  /* stub drops below the main panel: perforation turns horizontal */
  .addons-pass .v-ticket-perf{width:auto;height:2px;
    background-image:linear-gradient(90deg,var(--perf-c) 0 7px,transparent 7px 15px);
    background-size:15px 2px;background-repeat:repeat-x}
}
@media(max-width:520px){
  .addons-card{padding:22px 20px}
  .addons-card-top{margin-bottom:14px}
  .addons-feats li{font-size:13px}
  .addons-pass-main{padding:22px 20px}
  .addons-pass-price{font-size:34px}
  .addons-pass-stub{padding:20px 18px}
}

/* --------------------------------------------------------------------------
   Reduced motion - hover transitions only, no page-level animation.
   (Global rule already neutralises transitions; belt and braces.)
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .addons-go .v-arrow{transition:none}
  .addons-card:hover .addons-go .v-arrow{transform:none}
}