/* ============================================================
   components.css — reusable UI blocks (skin + intrinsic layout)
   Responsive overrides live in layout.css.
   ============================================================ */

/* ── Buttons ── */
.btn{display:inline-block;font-size:.92rem;font-weight:500;padding:12px 24px;border:var(--border-strong);background:var(--bg);color:var(--ink);transition:background var(--t-fast),color var(--t-fast);cursor:pointer;border-radius:var(--radius)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn-amber{background:var(--ink);color:var(--bg)}      /* primary (inverted) */
.btn-amber:hover{background:var(--bg);color:var(--ink)}
.btn-ghost{background:transparent}
.btn-lg{font-size:1rem;padding:16px 38px}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);background:var(--bg);border-bottom:var(--border)}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.nav-mark{font-family:var(--font-mono);font-size:.7rem;border:var(--border-strong);padding:3px 6px;letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:.88rem;color:var(--steel);transition:color var(--t-fast)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.nav-cta-btn{border:var(--border-strong);padding:8px 16px;color:var(--ink)}
.nav-links a.nav-cta-btn:hover{background:var(--ink);color:var(--bg)}

/* Nav dropdown (Авторам / Програма / archive years) */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font-size:.88rem;color:var(--steel);cursor:pointer;transition:color var(--t-fast)}
.drop-toggle:hover,.has-drop:hover .drop-toggle{color:var(--ink)}
.drop-toggle::after{content:'▾';font-size:.6rem}
.drop-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--bg);border:var(--border);display:none;flex-direction:column;padding:6px 0;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu,.has-drop.open-drop .drop-menu{display:flex}
.drop-menu a{padding:9px 18px;font-size:.86rem;color:var(--steel)}
.drop-menu a:hover{background:var(--bg-soft);color:var(--ink)}

/* ── Language switch ── */
.lang-switch{display:inline-flex;border:var(--border);font-family:var(--font-mono);font-size:.74rem}
.lang-switch a{padding:5px 9px;color:var(--mute);border-right:var(--border)}
.lang-switch a:last-child{border-right:none}
.lang-switch a.active{background:var(--ink);color:var(--bg)}
.lang-switch a:hover:not(.active){color:var(--ink)}

/* ── Burger + mobile overlay ── */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.burger span{width:22px;height:1px;background:var(--ink);transition:transform var(--t-fast),opacity var(--t-fast)}
.mobile-overlay{display:none;position:fixed;inset:0;z-index:var(--z-overlay);background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:32px;overflow-y:auto}
.mobile-overlay.open{display:flex}
.mobile-overlay a{font-size:1.2rem;color:var(--ink)}
.mobile-overlay .mob-cta{color:var(--accent)}
.mobile-overlay .mob-sub{font-size:.95rem;color:var(--steel)}

/* ── Hero ── */
.hero{position:relative;padding:64px var(--gutter);border-bottom:var(--border);background:var(--bg)}
.hero-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-visual{position:relative;align-self:stretch;min-height:380px;border:var(--border);overflow:hidden;background:var(--accent-soft)}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual.noimg::after{content:'📷 фото Хорватії';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.82rem;color:var(--accent)}
.hero-visual-cap{position:absolute;left:0;bottom:0;background:var(--bg);font-family:var(--font-mono);font-size:.72rem;color:var(--steel);padding:6px 12px;border-top:var(--border);border-right:var(--border)}
.hero-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;color:var(--steel);border:var(--border);padding:7px 14px;margin-bottom:32px}
.pulse{width:6px;height:6px;background:var(--ink);border-radius:var(--radius)}
.hero h1{font-size:3rem;font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:24px}
.hero h1 em{color:var(--steel)}
.hero-desc{font-size:1.1rem;color:var(--steel);max-width:640px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero-metrics{display:flex;gap:48px;flex-wrap:wrap;border-top:var(--border);padding-top:32px;margin-top:48px}
.metric{display:flex;flex-direction:column;gap:4px}
.metric-val{font-size:1.9rem;font-weight:600;letter-spacing:-.01em;color:var(--accent)}
.metric-label{font-size:.78rem;color:var(--mute);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.hero-note{font-size:.84rem;color:var(--accent);font-weight:500;margin:0 0 48px;display:flex;align-items:center;gap:8px}
.hero-note::before{content:'';width:6px;height:6px;background:var(--accent);display:inline-block}

/* ── Page hero (content / archive pages) ── */
.page-hero{padding:56px var(--gutter) 48px;border-bottom:var(--border);background:var(--bg)}
.page-hero-inner{max-width:var(--maxw);margin:0 auto}
.page-hero h1{font-size:2.2rem;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px}
.page-hero .lead{font-size:1.05rem;color:var(--steel);max-width:680px}
.post-meta{font-family:var(--font-mono);font-size:.76rem;color:var(--mute);margin-top:16px;display:flex;gap:16px;flex-wrap:wrap}
.post-meta .accent{color:var(--accent)}

/* ── Breadcrumbs ── */
.breadcrumbs{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter) 0;font-family:var(--font-mono);font-size:.74rem;color:var(--mute)}
.breadcrumbs a{color:var(--steel)}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs .sep{margin:0 8px;color:var(--line-strong)}

/* ── Trust band ── */
.trust{padding:40px 0;background:var(--bg-soft)}
.trust-line{font-size:.92rem;color:var(--steel);text-align:center;max-width:760px;margin:0 auto 24px}
.trust-line strong{color:var(--ink);font-weight:600}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:var(--border)}
.logo-slot{flex:1;min-width:140px;text-align:center;padding:18px 16px;font-family:var(--font-mono);font-size:.78rem;color:var(--mute);border-right:var(--border)}
.logo-slot:last-child{border-right:none}

/* ── Format cards ── */
.format-intro{margin-bottom:48px}
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);border:var(--border)}
.format-card{padding:32px;border-right:var(--border)}
.format-card:last-child{border-right:none}
.fc-icon{font-size:1rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:var(--border-strong);margin-bottom:20px;filter:grayscale(1)}
.format-card h3{font-size:1.1rem;font-weight:600;margin-bottom:10px}
.format-card p{font-size:.9rem;color:var(--steel)}

/* ── Panels ── */
.panel-grid{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border);border-left:var(--border)}
.panel-card{padding:28px;border-right:var(--border);border-bottom:var(--border)}
.panel-card h4{font-size:1rem;font-weight:600;margin:8px 0;line-height:1.3}
.panel-card p{font-size:.85rem;color:var(--steel)}
.pc-tag{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border:var(--border);padding:2px 7px}
.pc-tag.joint{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.seite-chips{display:flex;flex-wrap:wrap;border-top:var(--border);border-left:var(--border)}
.seite-chip{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-70);border-right:var(--border);border-bottom:var(--border);padding:12px 18px}

/* ── Trip timeline ── */
.trip-line{display:grid;grid-template-columns:repeat(9,1fr);border:var(--border);margin-top:48px}
.trip-day{padding:18px 12px;border-right:var(--border);text-align:left}
.trip-day:last-child{border-right:none}
.trip-day.highlight{background:var(--ink)}
.trip-day.highlight .td-date,.trip-day.highlight .td-label,.trip-day.highlight .td-desc{color:var(--bg)}
.td-date{font-family:var(--font-mono);font-size:.7rem;color:var(--mute);margin-bottom:8px}
.td-label{font-size:.85rem;font-weight:600;margin-bottom:3px}
.td-desc{font-size:.72rem;color:var(--steel)}

/* ── Program day-switcher + timeline ── */
.day-switcher{display:flex;margin:36px 0 0;border:var(--border-strong);width:fit-content}
.day-btn{font-size:.88rem;font-weight:500;padding:10px 22px;background:var(--bg);border:none;border-right:var(--border-strong);cursor:pointer;color:var(--steel)}
.day-btn:last-child{border-right:none}
.day-btn.active{background:var(--ink);color:var(--bg)}
.day-panel{display:none;margin-top:32px}
.day-panel.active{display:block}
.tl{border-top:var(--border)}
.tl-entry{display:grid;grid-template-columns:130px 1fr;gap:0 20px;padding:18px 0;border-bottom:var(--border);align-items:start}
.tl-time{grid-column:1;grid-row:1 / span 4;font-family:var(--font-mono);font-size:.78rem;color:var(--mute);padding-top:2px}
.tl-title{grid-column:2;font-size:.98rem;font-weight:600;margin-bottom:3px}
.tl-text{grid-column:2;font-size:.85rem;color:var(--steel)}
.tl-tag{grid-column:2;justify-self:start;display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);border:var(--border);padding:2px 8px}
.tl-tag.joint{color:var(--ink);border-color:var(--line-strong)}

/* ── Audience ── */
.aud-split{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border:var(--border)}
.aud-col{padding:32px}
.aud-col:first-child{border-right:var(--border)}
.aud-head{font-size:1.05rem;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:var(--border)}
.aud-list{display:grid;gap:10px}
.aud-list li{font-size:.9rem;color:var(--ink-70);padding-left:18px;position:relative}
.aud-list li::before{content:'—';position:absolute;left:0;color:var(--mute)}
.aud-list.check li::before{content:'✓';color:var(--accent)}

/* ── Venue ── */
.venue-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-top:48px}
.venue-desc{font-size:1rem;color:var(--steel);margin-bottom:28px}
.vf-list{display:flex;flex-direction:column;border-top:var(--border)}
.vf{display:flex;gap:16px;padding:16px 0;border-bottom:var(--border)}
.vf-ico{font-size:.9rem;width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--border-strong);filter:grayscale(1)}
.vf h4{font-size:.92rem;font-weight:600;margin-bottom:2px}
.vf p{font-size:.82rem;color:var(--steel)}
.venue-visual{border:var(--border);overflow:hidden}
.venue-photo{position:relative;height:280px;background:var(--accent-soft)}
.venue-photo img{width:100%;height:100%;object-fit:cover;display:block}
.venue-photo.noimg::after{content:'📍 фото Пореча / Адріатики';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.8rem;color:var(--accent)}
.venue-photo-cap{position:absolute;left:0;bottom:0;background:var(--bg);font-family:var(--font-mono);font-size:.72rem;color:var(--steel);padding:6px 12px;border-top:var(--border);border-right:var(--border)}
.venue-rooms-row{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border)}
.room-tag{padding:14px;border-right:var(--border);display:flex;flex-direction:column;gap:3px}
.room-tag:last-child{border-right:none}
.room-tag strong{font-size:.85rem;font-weight:600}
.room-tag span{font-size:.75rem;color:var(--steel)}

/* ── Photo strip (Croatia band) ── */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);border:var(--border);margin-top:28px}
.photo-strip figure{position:relative;margin:0;border-right:var(--border);aspect-ratio:3/2;overflow:hidden;background:var(--accent-soft)}
.photo-strip figure:last-child{border-right:none}
.photo-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.photo-strip figure:hover img{transform:scale(1.04)}
.photo-strip figcaption{position:absolute;left:0;bottom:0;background:var(--bg);font-family:var(--font-mono);font-size:.7rem;color:var(--steel);padding:5px 10px;border-top:var(--border);border-right:var(--border)}

/* ── Content-page banner photo ── */
.page-photo{position:relative;margin:0;height:300px;overflow:hidden;background:var(--accent-soft);border-bottom:var(--border)}
.page-photo img{width:100%;height:100%;object-fit:cover;display:block}
.page-photo figcaption{position:absolute;left:0;bottom:0;background:var(--bg);font-family:var(--font-mono);font-size:.72rem;color:var(--steel);padding:6px 12px;border-top:var(--border);border-right:var(--border)}

/* ── Publications ── */
.pub-tiers{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border:var(--border)}
.pub-tier{padding:28px;border-right:var(--border)}
.pub-tier:last-child{border-right:none}
.pub-tier h4{font-size:1.1rem;font-weight:600;margin:8px 0 10px}
.pub-tier p{font-size:.86rem;color:var(--steel)}
.pt-tag{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border:var(--border);padding:2px 7px}
.pub-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border:var(--border)}
.pub-step{padding:22px;border-right:var(--border)}
.pub-step:last-child{border-right:none}
.ps-num{font-family:var(--font-mono);font-size:.72rem;color:var(--mute);margin-bottom:14px}
.ps-date{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);margin-bottom:8px}
.pub-step h4{font-size:.92rem;font-weight:600;margin-bottom:4px}
.pub-step p{font-size:.8rem;color:var(--steel)}

/* ── Pricing ── */
.price-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border:var(--border)}
.price-card{padding:32px;border-right:var(--border)}
.price-card:last-child{border-right:none}
.price-card.featured{background:var(--accent-soft);border-top:2px solid var(--accent)}
.pcard-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:18px;margin-bottom:18px;border-bottom:var(--border)}
.pcard-name{font-size:1.1rem;font-weight:600}
.pcard-amount{font-size:1.7rem;font-weight:600;letter-spacing:-.01em;color:var(--accent)}
.pcard-perks{display:grid;gap:9px}
.pcard-perks li{font-size:.86rem;color:var(--ink-70);padding-left:18px;position:relative}
.pcard-perks li::before{content:'✓';position:absolute;left:0;color:var(--accent)}
.price-extras{display:grid;grid-template-columns:1fr 1fr;border:var(--border);border-top:none}
.extra-item{padding:18px 24px;border-right:var(--border);display:flex;flex-direction:column;gap:3px}
.extra-item:last-child{border-right:none}
.extra-item strong{font-size:.9rem;font-weight:600}
.extra-item span{font-size:.8rem;color:var(--steel)}
.price-note{font-size:.84rem;color:var(--steel);margin-top:24px;max-width:760px}

/* ── CTA (dark) ── */
.cta{background:var(--ink);border-bottom:none}
.cta .label{color:var(--on-dark-faint);border-bottom-color:var(--steel)}
.cta .label.on-accent{color:var(--accent-line);border-color:var(--accent-line)}
.cta .heading-lg{color:var(--bg)}
.cta .body-lg{color:var(--on-dark-mute)}
.reg-cta{margin-top:32px}
.cta-badges{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border:1px solid var(--dark-line)}
.cta-badge{padding:18px 22px;border-right:1px solid var(--dark-line);display:flex;flex-direction:column;gap:5px}
.cta-badge:last-child{border-right:none}
.cb-k{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-dark-faint)}
.cb-v{font-size:1.1rem;font-weight:600;color:var(--bg)}
.cta .btn{border-color:var(--bg);background:var(--bg);color:var(--ink)}
.cta .btn:hover{background:transparent;color:var(--bg)}
.reg-contact{font-size:.84rem;color:var(--on-dark-faint);margin-top:24px;line-height:1.7}
.reg-contact a{color:var(--bg)}
.reg-contact a:hover{text-decoration:underline}

/* ── Notices (translation-missing, info) ── */
.notice{display:flex;gap:12px;align-items:flex-start;border:var(--border);border-left:3px solid var(--accent);background:var(--bg-soft);padding:14px 18px;font-size:.88rem;color:var(--steel);margin-bottom:28px}
.notice strong{color:var(--ink)}
.notice.warn{border-left-color:#b8860b}

/* ── Document / download list ── */
.doc-list{display:flex;flex-direction:column;border-top:var(--border);margin-top:8px}
.doc-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:var(--border)}
.doc-ico{font-family:var(--font-mono);font-size:.68rem;border:var(--border-strong);padding:4px 7px;color:var(--ink);flex-shrink:0}
.doc-item .doc-name{font-size:.95rem;font-weight:500;color:var(--ink)}
.doc-item .doc-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--mute)}
.doc-item a.btn{margin-left:auto}

/* ── Reveal animation ── */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}
.reveal-d2{transition-delay:.12s}
.reveal-d3{transition-delay:.18s}
.no-js .reveal{opacity:1;transform:none}    /* progressive enhancement */

/* ── Language suggestion bar (one-time, dismissible) ── */
.lang-suggest{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--ink);color:var(--bg);padding:12px 20px;font-size:.86rem}
.lang-suggest a{color:var(--accent-line);border-bottom:1px solid var(--accent-line)}
.lang-suggest button{color:var(--on-dark-faint);font-size:.9rem;line-height:1;padding:4px}
.lang-suggest button:hover{color:var(--bg)}

/* ── Footer ── */
footer{background:var(--bg);padding:56px var(--gutter);text-align:center;border-top:var(--border)}
.f-brand{font-weight:600;font-size:1rem;margin-bottom:6px}
footer p{font-size:.85rem;color:var(--steel)}
footer p+p{margin-top:.3rem}
.f-fine{font-size:.78rem}
.f-copy{margin-top:1.2rem;font-size:.7rem}
.f-links{display:flex;gap:24px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.f-links a{font-size:.85rem;color:var(--ink);border-bottom:var(--border)}
.f-links a:hover{border-color:var(--line-strong)}