/* ==========================================================================
   EuroTennis Landing — frontend design system
   Ported from the EuroTennis Claude Artifact prototype.
   Every class is prefixed `et-` so it never collides with other themes,
   plugins, or WordPress core block classes.
   ========================================================================== */

:root{
  --et-paper:#faf3e8;
  --et-paper-2:#f1e3cd;
  --et-paper-3:#e9d7ba;
  --et-ink:#2a1d14;
  --et-ink-soft:#6e5c4a;
  --et-clay:#c1552b;
  --et-clay-deep:#8f3b1d;
  --et-line: rgba(42,29,20,.16);
  --et-line-strong: rgba(42,29,20,.32);
  --et-cream:#fff9ef;
  --et-cream-soft:#eaddc9;
  --et-gold:#f0c584;
  --et-scrim:20,12,8;
  --et-serif: "Noto Serif SC", "Fraunces", serif;
  --et-sans: "Noto Sans SC", -apple-system, sans-serif;
  --et-mono: "IBM Plex Mono", ui-monospace, monospace;
  --et-latin: "Fraunces", "Noto Serif SC", serif;
  --et-topbar-h: 84px;
  color-scheme: light;
}

/* ---- base ---- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* The published page has zero space between sections (page-eurotennis.php
   calls the_content() with no spacing container), but the block editor
   canvas always adds its own default "block gap" (~2em) between top-level
   blocks regardless of theme — that gap only ever shows up while editing,
   never on the live site. Zero it inside the editor iframe (.editor-styles-
   wrapper) so the canvas matches the real, gap-less front end. */
.editor-styles-wrapper{ --wp--style--block-gap:0; }
/* Every width/max-width + padding pairing below (.et-wrap chief among them)
   assumes padding is counted INSIDE the declared width, not added on top.
   That's true automatically for a flex item (e.g. .et-wrap sitting inside
   .et-section, which is display:flex) because the flex sizing algorithm
   already accounts for box-sizing — but .et-wrap is reused as a plain block
   in footer.php (.et-footer is NOT a flex container), and browsers default
   to content-box there, so the padding got added on top of max-width:1180px
   and overflowed the page horizontally. Bug is fixed at the root here
   instead of special-casing the footer. */
.et-body, .et-body *, .et-body *::before, .et-body *::after{ box-sizing:border-box; }
.et-body{ background:var(--et-paper); color:var(--et-ink); font-family:var(--et-sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
.et-body h1,.et-body h2,.et-body h3{ font-family:var(--et-serif); font-weight:700; margin:0; color:var(--et-ink); }
.et-body p{ margin:0; }
.et-body img{ display:block; max-width:100%; }
.et-wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px); width:100%; }

/* ---- top bar ---- */
.et-topbar{ position:fixed; inset:0 0 auto 0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:16px clamp(20px,5vw,64px); background:rgba(250,243,232,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--et-line); }
.et-brand{ display:flex; flex-direction:column; line-height:1.2; text-decoration:none; }
.et-brand-name{ font-family:var(--et-latin); font-style:italic; font-weight:600; font-size:1.15rem; color:var(--et-ink); }
.et-brand-tagline{ font-size:.7rem; color:var(--et-ink-soft); letter-spacing:.02em; }
.et-topbar-right{ display:flex; align-items:center; gap:24px; }
.et-topbar-menu{ list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.et-topbar-menu a{ font-family:var(--et-mono); font-size:.82rem; letter-spacing:.02em; color:var(--et-ink); text-decoration:none; }
.et-topbar-menu a:hover{ color:var(--et-clay); }
.et-topbar-menu .current-menu-item a{ color:var(--et-clay); }
.et-nav-cta{ font-family:var(--et-mono); font-size:.76rem; letter-spacing:.06em; background:var(--et-clay); color:var(--et-cream); border-radius:999px; padding:.6em 1.3em; text-decoration:none; white-space:nowrap; }
.et-nav-cta:hover{ background:var(--et-clay-deep); }

/* ---- footer ---- */
.et-footer{ background:var(--et-paper); padding:28px 0; border-top:1px solid var(--et-line); }
.et-footer-row{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-family:var(--et-mono); font-size:.75rem; color:var(--et-ink-soft); letter-spacing:.02em; }

/* ---- shared eyebrow / tags ---- */
.et-eyebrow{ font-family:var(--et-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--et-clay-deep); display:inline-flex; align-items:center; gap:.6em; }
.et-eyebrow::before{ content:""; width:1.6em; height:1px; background:var(--et-clay-deep); }
.et-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:1.2em; }
.et-tags span{ font-family:var(--et-mono); font-size:.72rem; letter-spacing:.03em; border:1px solid rgba(255,249,239,.38); padding:.35em .8em; border-radius:999px; color:var(--et-cream-soft); }

/* ---- reveal-on-scroll ---- */
.et-reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.et-reveal.et-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .et-reveal{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   Section block (eurotennis/section)
   data-type: hero | feature | quote | plain
   data-align: left | right   (scrim direction + text side, feature type)
   ========================================================================== */
.et-section{ position:relative; overflow:hidden; display:flex; color:var(--et-cream); min-height:70vh; padding-block:clamp(64px,10vw,120px); scroll-margin-top:var(--et-topbar-h); }
.et-section .et-media{ position:absolute; inset:0; z-index:0; background:var(--et-ink-soft); overflow:hidden; }
/* "Camera drift": while a section is in view its photo very slowly zooms
   and drifts (initTicketReveal's sibling, initBackgroundPan, toggles
   .et-panning via IntersectionObserver). The base rule below is also the
   "reset" leg — a short, fast transition — so removing .et-panning (the
   section scrolled out of view, or the slow pan already finished and
   initBackgroundPan removed the class itself) always eases the image back
   to its starting position and holds there; it never loops on its own.
   The 12% scale keeps the object-fit:cover image safely oversized so the
   small translate never reveals an edge. */
.et-section .et-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1) translate(0,0); transition:transform 1.1s ease-out; will-change:transform; }
.et-section.et-panning .et-media img{ transform:scale(1.12) translate(-1.4%,-1.4%); transition:transform 11s cubic-bezier(.16,.52,.32,1); }
@media (prefers-reduced-motion: reduce){ .et-section .et-media img{ transition:none !important; transform:none !important; } }
.et-section .et-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(var(--et-scrim),.15), rgba(var(--et-scrim),.75)); }
.et-section[data-align="left"] .et-scrim{ background:linear-gradient(100deg, rgba(var(--et-scrim),.86) 0%, rgba(var(--et-scrim),.5) 45%, rgba(var(--et-scrim),.15) 80%); }
.et-section[data-align="right"] .et-scrim{ background:linear-gradient(260deg, rgba(var(--et-scrim),.86) 0%, rgba(var(--et-scrim),.5) 45%, rgba(var(--et-scrim),.15) 80%); }
.et-section .et-wrap{ position:relative; z-index:2; width:100%; align-self:center; }
.et-section h1,.et-section h2,.et-section h3{ color:var(--et-cream); }
.et-section h1 em,.et-section h2 em,.et-section h3 em{ font-style:normal; color:var(--et-gold); }
.et-section p{ color:var(--et-cream-soft); }
.et-section .et-eyebrow{ color:var(--et-gold); }
.et-section .et-eyebrow::before{ background:var(--et-gold); }

.et-ghost-num{ position:absolute; z-index:1; top:-2vw; font-family:var(--et-latin); font-weight:600; font-size:clamp(7rem,20vw,15rem); color:rgba(255,249,239,.16); line-height:1; pointer-events:none; user-select:none; }
.et-section[data-align="right"] .et-ghost-num{ right:2vw; }
.et-section[data-align="left"] .et-ghost-num{ left:2vw; }

.et-copy{ max-width:640px; }
.et-section[data-align="right"] .et-copy{ margin-left:auto; text-align:right; }
.et-section[data-align="right"] .et-tags{ justify-content:flex-end; }
.et-copy h1,.et-copy h2,.et-copy h3{ font-size:clamp(1.6rem,3.2vw,2.4rem); margin-top:.5em; }
.et-copy .et-content{ font-size:1.05rem; margin-top:1.1em; max-width:60ch; }
.et-section[data-align="right"] .et-copy .et-content{ margin-left:auto; }

/* hero variant */
.et-section[data-type="hero"]{ min-height:100vh; align-items:flex-end; padding-bottom:clamp(48px,7vw,88px); }
.et-section[data-type="hero"] .et-copy{ max-width:760px; }
.et-section[data-type="hero"] h1{ font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.08; }
.et-section[data-type="hero"] .et-content{ font-size:1.1rem; max-width:56ch; }
.et-section[data-type="hero"] .et-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.8em; }

/* quote variant */
.et-section[data-type="quote"]{ min-height:56vh; align-items:center; text-align:center; }
.et-section[data-type="quote"] .et-wrap{ display:flex; flex-direction:column; align-items:center; }
.et-section[data-type="quote"] .et-eyebrow{ justify-content:center; }
.et-section[data-type="quote"] h2{ font-size:clamp(1.5rem,3.6vw,2.6rem); max-width:20ch; margin-top:.6em; }

/* plain variant (no background photo, paper background, dark text) */
.et-section[data-type="plain"]{ background:var(--et-paper); color:var(--et-ink); min-height:auto; }
.et-section[data-type="plain"] h2,.et-section[data-type="plain"] h3{ color:var(--et-ink); }
.et-section[data-type="plain"] p{ color:var(--et-ink-soft); }
.et-section[data-type="plain"] .et-eyebrow{ color:var(--et-clay-deep); }
.et-section[data-type="plain"] .et-eyebrow::before{ background:var(--et-clay-deep); }
.et-section[data-type="plain"] .et-tags span{ border-color:var(--et-line-strong); color:var(--et-ink-soft); }

/* corner tag badge */
.et-corner-tag{ position:absolute; z-index:3; font-family:var(--et-mono); font-size:.68rem; letter-spacing:.03em; padding:.5em 1em; background:var(--et-clay); color:var(--et-cream); border-radius:2px; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
.et-section[data-corner="tl"] .et-corner-tag{ top:20px; left:20px; }
.et-section[data-corner="tr"] .et-corner-tag{ top:20px; right:20px; }
.et-section[data-corner="bl"] .et-corner-tag{ bottom:20px; left:20px; }
.et-section[data-corner="br"] .et-corner-tag{ bottom:20px; right:20px; }

/* hero-only "SCROLL" hint (Artifact's .scroll-cue), a static hairline +
   label pinned to the bottom-left of the section — no animation in the
   original, just a vertical gold-to-transparent gradient line. */
.et-scroll-cue{ position:absolute; left:clamp(20px,5vw,64px); bottom:26px; z-index:2; display:flex; align-items:center; gap:.7em; font-family:var(--et-mono); font-size:.7rem; letter-spacing:.12em; color:var(--et-cream-soft); }
.et-scroll-cue i{ width:1px; height:26px; background:linear-gradient(var(--et-gold), transparent); display:block; }

/* simple buttons (hero CTAs) */
.et-btn{ font-family:var(--et-mono); font-size:.85rem; letter-spacing:.03em; padding:.9em 1.8em; border-radius:2px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; }
.et-btn-solid{ background:var(--et-clay); color:var(--et-cream); }
.et-btn-outline{ border-color:rgba(255,249,239,.5); color:var(--et-cream); }
.et-section[data-type="plain"] .et-btn-outline{ border-color:var(--et-line-strong); color:var(--et-ink); }

/* Contact Box embedded inside a Section (see "showContactBox" attribute) */
.et-inner-contact{ margin-top:1.8em; }

/* ==========================================================================
   Ticket / "价格与预定" reveal card (eurotennis/contact-box, and the same
   markup embedded inside a Section via "showContactBox"). Ported 1:1 from
   the Artifact's .ticket component: a collapsed bar (route + reveal
   button) that expands in place — via a CSS grid-rows transition, no
   popup/dialog — into a two-column price list + QR/contact panel,
   separated by a dashed "perforation" line with two punched-out circles.
   ========================================================================== */
.et-contact-box{ scroll-margin-top:var(--et-topbar-h); }

.et-ticket{ position:relative; background:rgba(250,243,232,.92); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.4); border-top:3px solid var(--et-clay); border-radius:3px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); }
.et-ticket, .et-ticket *{ color:var(--et-ink); }

.et-ticket-top{ display:flex; align-items:center; justify-content:space-between; padding:clamp(20px,3vw,32px) clamp(20px,4vw,40px); gap:20px; flex-wrap:wrap; }
.et-ticket-route{ display:flex; align-items:baseline; gap:14px; font-family:var(--et-mono); font-size:.85rem; color:var(--et-ink-soft); }
.et-ticket-route strong{ font-family:var(--et-latin); font-style:italic; font-weight:600; color:var(--et-ink); font-size:1.1rem; }

.et-reveal-btn{ background:var(--et-clay); color:var(--et-cream) !important; border:none; font-family:var(--et-mono); font-size:.85rem; letter-spacing:.04em; padding:.95em 1.8em; border-radius:2px; cursor:pointer; }
.et-reveal-btn[aria-expanded="true"]{ background:transparent; border:1px solid var(--et-line-strong); color:var(--et-ink) !important; }

.et-ticket-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s ease; }
.et-ticket-detail.open{ grid-template-rows:1fr; }
.et-ticket-detail-inner{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .et-ticket-detail{ transition:none; } }

.et-perforation{ height:0; border-top:1px dashed var(--et-line-strong); position:relative; }
.et-perforation::before, .et-perforation::after{ content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--et-paper); }
.et-perforation::before{ left:-9px; }
.et-perforation::after{ right:-9px; }

.et-ticket-grid{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:760px){ .et-ticket-grid{ grid-template-columns:1.2fr 1fr; } }

.et-ticket-prices{ padding:clamp(24px,4vw,40px); display:flex; flex-direction:column; gap:18px; }
.et-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-block:10px; border-bottom:1px solid var(--et-line); }
.et-price-row:last-of-type{ border-bottom:none; }
.et-price-name{ font-size:.95rem; color:var(--et-ink-soft); }
.et-price-num{ font-family:var(--et-latin); font-size:1.5rem; font-variant-numeric:tabular-nums; color:var(--et-ink); white-space:nowrap; }
.et-price-num sup{ font-family:var(--et-mono); font-size:.6rem; color:var(--et-ink-soft); margin-right:.3em; }
.et-price-fine{ font-size:.85rem; color:var(--et-ink) !important; font-weight:500; margin-top:4px; }

.et-ticket-contact{ padding:clamp(24px,4vw,40px); background:var(--et-paper-3); display:flex; gap:24px; flex-wrap:wrap; align-items:center; border-top:1px dashed var(--et-line-strong); }
@media (min-width:760px){ .et-ticket-contact{ border-top:none; border-left:1px dashed var(--et-line-strong); } }
/* .et-qr used to overlay .et-qr-tag on top of the QR image's bottom edge
   (position:absolute), copied as-is from the Artifact where the image was
   just a "示例·请替换" placeholder graphic. With a real, scannable WeChat QR
   code that overlap hides part of the code, so the caption now sits in its
   own strip below the image instead of on top of it. */
.et-qr{ width:104px; flex:none; border:1px solid var(--et-line-strong); border-radius:2px; overflow:hidden; }
.et-qr img{ display:block; width:100%; height:104px; object-fit:cover; }
.et-qr-tag{ display:block; background:rgba(42,29,20,.82); color:var(--et-paper) !important; font-family:var(--et-mono); font-size:.55rem; letter-spacing:.02em; text-align:center; padding:3px 2px; }
.et-contact-lines{ font-size:.9rem; color:var(--et-ink-soft); flex:1; min-width:180px; }
.et-contact-lines strong{ display:block; color:var(--et-ink); font-family:var(--et-mono); font-size:.95rem; letter-spacing:.02em; margin-bottom:4px; }
.et-contact-lines .et-phone{ display:block; font-family:var(--et-mono); font-size:1.35rem; font-weight:600; color:var(--et-ink); letter-spacing:.02em; margin-top:4px; }
.et-contact-lines .et-hours{ margin-top:8px; font-size:.8rem; }

/* Editor-only preview tweaks (see blocks/contact-box/edit.js) — the
   ticket-detail panel is always shown expanded while editing (no click
   interaction inside the canvas), with a Notice explaining that visitors
   see it collapsed first on the real front end. */
.et-contact-box-editor{ padding:8px 0; }
.et-ticket-detail-editor-preview{ display:block !important; }

/* Section block: editor canvas is narrower than the real front end, so
   relax the min-height there instead of forcing a full viewport. */
.et-section-editor{ min-height:320px !important; }

@media (max-width:640px){
  .et-section{ padding-block:56px; }
  .et-footer-row{ flex-direction:column; }
}