/* ============================================================
   Event Type Templates — /templates and /templates/{slug}
   Builds on feature-page.css tokens (--fp-*). Surfaces use the
   global --surface/--bg tokens so dark-theme.css flips them.
   ============================================================ */
.ett-body{background:var(--bg, #fff)}

/* ── Hero ── */
.ett-hero{padding:28px 0 8px;text-align:center}
.ett-label{display:inline-block;font-size:12px;font-weight:700;color:var(--fp-purple);text-transform:uppercase;letter-spacing:.08em;background:var(--fp-purple-soft);padding:5px 14px;border-radius:999px;margin-bottom:14px}
.ett-title{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(28px,4.2vw,46px);font-weight:800;color:var(--fp-ink);line-height:1.12;margin:0 0 14px}
.ett-desc{font-size:16px;line-height:1.65;color:var(--fp-text);max-width:640px;margin:0 auto}

.ett-section{padding:40px 0 80px}

/* ── Template grid ──
   Each card = a white "mat" (.ett-frame) holding the design like a printed
   invite, with a hairline ring so white/cream designs never melt into it.
   Hover lifts the card with a brand-tinted glow. Cards show only the design
   — name/code are in the preview modal. Actions live in a hover overlay
   (desktop); on touch, a tap opens the modal. */
.ett-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px}
.ett-card{min-width:0;animation:ett-rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes ett-rise{from{opacity:0;transform:translateY(16px)}}
.ett-frame{padding:8px;border-radius:20px;background:var(--surface, #fff);border:1px solid rgba(var(--fp-purple-rgb),.10);box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 20px -6px rgba(16,24,40,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease}
.ett-card:hover .ett-frame,.ett-card:focus-within .ett-frame{transform:translateY(-6px);border-color:rgba(var(--fp-purple-rgb),.28);box-shadow:0 2px 4px rgba(16,24,40,.04),0 24px 44px -14px rgba(var(--fp-purple-rgb),.42)}
.ett-thumb{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer;isolation:isolate;background:linear-gradient(135deg,var(--fp-purple) 0%,var(--fp-purple-700) 100%)}
/* hairline inner ring — keeps light designs crisp against the white mat */
.ett-thumb::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07);pointer-events:none}
.ett-thumb img{position:absolute;top:0;left:0;width:100%;display:block}
.ett-thumb-img{height:100%;object-fit:cover;object-position:top;z-index:2;transition:opacity .35s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.ett-thumb-full{height:auto;z-index:1;transform:translateY(0);transition:transform .7s ease}
.ett-thumb:hover .ett-thumb-img{transform:scale(1.04)}
.ett-thumb.has-full:hover .ett-thumb-img{opacity:0}
.ett-thumb.has-full:hover .ett-thumb-full{transform:translateY(var(--ett-dist,0));transition:transform var(--ett-dur,6s) linear .35s}
.ett-thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:#fff;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:20px;font-weight:700}
.ett-premium{position:absolute;top:10px;left:10px;z-index:5;display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FBBF24,#F59E0B 55%,#EA580C);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(234,88,12,.35)}

/* Hover: one centered row — round glass eye (Preview) + "Use template" */
.ett-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:radial-gradient(120% 80% at 50% 50%,rgba(17,24,39,.42),rgba(17,24,39,.18));opacity:0;transition:opacity .25s ease}
.ett-overlay .ett-btn{transform:translateY(8px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease}
.ett-overlay .ett-btn + .ett-btn{transition-delay:.04s}
.ett-thumb:hover .ett-overlay,.ett-thumb:focus-within .ett-overlay,.ett-thumb:focus-visible .ett-overlay{opacity:1}
.ett-thumb:hover .ett-overlay .ett-btn,.ett-thumb:focus-within .ett-overlay .ett-btn{transform:none}
.ett-thumb:focus-visible{outline:2px solid var(--fp-purple);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ett-card{animation:none}
  .ett-frame,.ett-thumb-img,.ett-overlay .ett-btn{transition:none}
  .ett-card:hover .ett-frame,.ett-card:focus-within .ett-frame{transform:none}
}

.ett-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 13px/1 var(--font-body, Arial, sans-serif);padding:11px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s ease, border-color .2s ease, color .2s ease}
.ett-btn-primary{background:var(--fp-purple);color:#fff}
.ett-btn-primary:hover{background:var(--fp-purple-600);color:#fff}
.ett-btn-light{background:#fff;color:var(--fp-ink);border-color:var(--fp-border)}
.ett-btn-light:hover{border-color:var(--fp-purple);color:var(--fp-purple)}
.ett-btn-icon{width:40px;height:40px;padding:0;border-radius:50%;flex-shrink:0}
.ett-overlay .ett-btn-light{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.ett-overlay .ett-btn-light:hover{background:#fff}
.ett-overlay .ett-btn-primary{height:40px;padding:0 18px;border-radius:999px;box-shadow:0 8px 20px rgba(var(--fp-purple-rgb),.45)}
.ett-btn:focus-visible,.ett-modal button:focus-visible{outline:2px solid var(--fp-purple);outline-offset:2px}

/* Touch devices have no hover → no overlay; tapping the card opens the modal */
@media (hover:none){
  .ett-overlay{display:none}
}

/* ── Preview modal ── */
.ett-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,20,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease}
.ett-modal[hidden]{display:none}
.ett-modal.is-open{opacity:1}
.ett-modal-box{position:relative;display:grid;grid-template-columns:auto auto auto minmax(300px,440px);align-items:center;gap:20px;max-width:100%;max-height:100%;padding:32px 48px 32px 40px;border-radius:24px;background:var(--surface, #fff);box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(10px) scale(.98);transition:transform .25s ease}
.ett-modal.is-open .ett-modal-box{transform:none}
.ett-modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--fp-border);background:var(--surface, #fff);color:var(--fp-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ett-modal-close:hover{color:var(--fp-purple);border-color:var(--fp-purple)}
.ett-modal-nav{width:42px;height:42px;border-radius:50%;border:1px solid var(--fp-border);background:var(--surface, #fff);color:var(--fp-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.ett-modal-nav:hover{background:var(--fp-purple);border-color:var(--fp-purple);color:#fff}
.ett-modal.ett-single .ett-modal-nav{visibility:hidden}

.ett-phone{width:min(330px, calc((100vh - 120px) * 9 / 16));padding:10px;border-radius:44px;background:#111;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ett-phone-screen{position:relative;aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#f3f4f6}
.ett-phone-shot{position:absolute;inset:0;overflow:hidden;background:#fff}
.ett-phone-shot.is-full{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent}
.ett-shot-thumb{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ett-shot-full{width:100%;height:auto;display:block;animation:ett-fade .25s ease}
@keyframes ett-fade{from{opacity:.6}}
.ett-phone-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-weight:700;color:var(--fp-ink)}
.ett-phone-skel{position:absolute;inset:0;background:linear-gradient(100deg,#eceef2 30%,#f8f9fb 50%,#eceef2 70%);background-size:200% 100%;animation:ett-shimmer 1.2s linear infinite}
@keyframes ett-shimmer{to{background-position:-200% 0}}

.ett-modal-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-left:16px}
.ett-modal-name{max-width:100%;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:26px;font-weight:700;color:var(--fp-ink);line-height:1.2;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ett-modal-code{font-size:13px;font-weight:600;color:var(--fp-muted);letter-spacing:.04em;margin:0 0 18px}
.ett-modal-hint{font-size:14px;line-height:1.6;color:var(--fp-text);margin:0 0 24px}
.ett-modal-use{width:100%;justify-content:center}
.ett-modal-count{font-size:13px;color:var(--fp-muted);margin:14px 0 0;align-self:center}

/* ── Other event types ── */
.ett-others{margin-top:64px;text-align:center}
.ett-others-title{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--fp-ink);margin:0 0 20px}
.ett-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ett-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--fp-border);border-radius:999px;background:var(--surface, #fff);color:var(--fp-ink);font-size:14px;font-weight:500;text-decoration:none;transition:border-color .2s ease, color .2s ease}
.ett-chip span{font-size:12px;color:var(--fp-muted)}
.ett-chip:hover{border-color:var(--fp-purple);color:var(--fp-purple)}

/* ── Index: event type cards ── */
/* Each card: a tinted "stage" with up to 3 template covers fanned out
   (front one centred, the others tilted behind), then name/count + arrow.
   Hover lifts the card and spreads the fan. */
.ett-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,340px));justify-content:center;gap:28px}
.ett-type-card{display:flex;flex-direction:column;border-radius:22px;background:var(--surface, #fff);border:1px solid rgba(var(--fp-purple-rgb),.10);text-decoration:none;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px -8px rgba(16,24,40,.10);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;animation:ett-rise .5s cubic-bezier(.2,.8,.2,1) both}
.ett-type-card:hover,.ett-type-card:focus-visible{transform:translateY(-6px);border-color:rgba(var(--fp-purple-rgb),.28);box-shadow:0 2px 4px rgba(16,24,40,.04),0 26px 48px -16px rgba(var(--fp-purple-rgb),.45)}
.ett-type-card:focus-visible{outline:2px solid var(--fp-purple);outline-offset:3px}

.ett-type-stage{position:relative;display:block;height:240px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,rgba(var(--fp-purple-rgb),.22),rgba(var(--fp-purple-rgb),.04) 70%),var(--fp-purple-soft)}
.ett-fan{position:absolute;left:50%;bottom:-18px;width:132px;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:10px;border:3px solid #fff;background:#fff;box-shadow:0 12px 28px rgba(16,24,40,.22);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ett-fan-pos-0{z-index:3;transform:translateX(-50%)}
.ett-fan-pos-1{z-index:2;transform:translateX(-112%) rotate(-10deg) scale(.9)}
.ett-fan-pos-2{z-index:1;transform:translateX(12%) rotate(10deg) scale(.9)}
.ett-type-card:hover .ett-fan-pos-0{transform:translateX(-50%) translateY(-10px)}
.ett-type-card:hover .ett-fan-pos-1{transform:translateX(-118%) rotate(-13deg) scale(.9)}
.ett-type-card:hover .ett-fan-pos-2{transform:translateX(18%) rotate(13deg) scale(.9)}
.ett-fan-empty{display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--fp-purple),var(--fp-purple-700))}

.ett-type-info{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 20px;border-top:1px solid rgba(var(--fp-purple-rgb),.08)}
.ett-type-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.ett-type-cat{font-size:11px;font-weight:700;color:var(--fp-purple);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ett-type-name{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:21px;font-weight:700;color:var(--fp-ink);line-height:1.25}
.ett-type-count{font-size:13px;color:var(--fp-muted)}
.ett-type-go{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--fp-purple-soft);color:var(--fp-purple);transition:background .25s ease, color .25s ease, transform .25s ease}
.ett-type-card:hover .ett-type-go{background:var(--fp-purple);color:#fff;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .ett-type-card,.ett-fan,.ett-type-go{animation:none;transition:none}
  .ett-type-card:hover{transform:none}
}
.ett-empty{text-align:center;color:var(--fp-muted);font-size:16px}

@media (max-width:1200px){
  .ett-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1024px){
  .ett-grid{grid-template-columns:repeat(3,1fr)}
  .ett-modal-box{grid-template-columns:auto auto auto;padding:28px 24px}
  .ett-modal-info{grid-column:1 / -1;align-items:center;text-align:center;padding:0}
  .ett-modal-hint{display:none}
  .ett-modal-code{margin-bottom:14px}
  .ett-phone{width:min(300px, calc((100vh - 300px) * 9 / 16))}
}
@media (max-width:768px){
  .ett-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .ett-section{padding:28px 0 56px}
  .ett-frame{padding:6px;border-radius:16px}
  .ett-thumb{border-radius:11px}
  /* Full-screen sheet: phone fills the width, arrows overlay its edges */
  .ett-modal{padding:0}
  .ett-modal-box{width:100%;height:100%;border-radius:0;grid-template-columns:1fr;grid-template-rows:1fr auto;justify-items:center;gap:14px;padding:60px 16px 20px}
  .ett-phone{width:min(100%, calc((100vh - 250px) * 9 / 16));padding:7px;border-radius:32px}
  .ett-phone-screen{border-radius:26px}
  .ett-modal-nav{position:absolute;top:calc(50% - 60px);z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .ett-modal-prev{left:10px}
  .ett-modal-next{right:10px}
  .ett-modal-info{grid-column:auto;width:100%;max-width:420px}
  .ett-modal-name{font-size:20px;margin:0 0 2px}
  .ett-modal-info .ett-label{display:none}
  .ett-modal-count{margin-top:10px}
}
@media (max-width:420px){
  .ett-type-grid{grid-template-columns:1fr}
  .ett-type-stage{height:210px}
  .ett-fan{width:116px}
}