/* Attenda design layer, loaded after app.css and theme.css (organiser admin and projector screen excluded).
   - Every page header becomes a photo banner with a dark overlay, so its text reads well in both themes.
   - Cards get soft depth instead of the blue offset shadow.
   - Layouts for the home page, registration and sign-in.
   Photos: Budapest at night and by day from Unsplash (Unsplash License); see hero_photo() for credits. */

/* Banner photo, position and credit come from hero_photo() in functions.php (inline on <body>). Fallbacks here. */
body { --hero-lg:url(/assets/hero/home.jpg); --hero-sm:url(/assets/hero/home-900.jpg); --hero-pos:62% 40%; --hero-credit:"Photo: Albert Canite / Unsplash";
       --shadow-card:0 1px 2px rgba(5,11,24,.06),0 22px 44px -22px rgba(5,11,24,.45); --radius-card:20px; }

/* ---------- Photo banner (every .hero / .live-hero outside the admin) ---------- */
body:not([data-page="admin"]) main.shell > .hero,
body:not([data-page="admin"]) main.shell > .live-hero {
  position:relative; isolation:isolate; max-width:none; margin:6px 0 30px; overflow:hidden;
  padding:clamp(44px,7vw,88px) clamp(24px,5vw,60px) clamp(40px,5.5vw,64px);
  border-radius:26px; color:#fff; background:#0b1424 var(--hero-lg) var(--hero-pos) / cover no-repeat; box-shadow:var(--shadow-card);
}
body:not([data-page="admin"]) main.shell > .live-hero { padding:clamp(30px,4vw,44px) clamp(24px,4vw,48px); margin-bottom:22px; }
body:not([data-page="admin"]) main.shell > .hero::before,
body:not([data-page="admin"]) main.shell > .live-hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(5,11,24,.95) 0%,rgba(5,11,24,.82) 38%,rgba(5,11,24,.42) 72%,rgba(5,11,24,.2) 100%),linear-gradient(0deg,rgba(5,11,24,.55),transparent 45%);
}
body:not([data-page="admin"]) main.shell > .hero::after,
body:not([data-page="admin"]) main.shell > .live-hero::after {
  content:var(--hero-credit); position:absolute; right:18px; bottom:12px; color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.03em;
}
body:not([data-page="admin"]) main.shell > .hero h1, body:not([data-page="admin"]) main.shell > .live-hero h1 { max-width:820px; color:#fff; }
body:not([data-page="admin"]) main.shell > .live-hero h1 { font-size:clamp(32px,5vw,52px); }
body:not([data-page="admin"]) main.shell > .hero .lead, body:not([data-page="admin"]) main.shell > .live-hero .lead { max-width:640px; color:rgba(233,238,247,.88); }
body:not([data-page="admin"]) main.shell > .hero .eyebrow, body:not([data-page="admin"]) main.shell > .live-hero .eyebrow { color:#59d8b2; }
@media (max-width:900px) {
  body:not([data-page="admin"]) main.shell > .hero, body:not([data-page="admin"]) main.shell > .live-hero { background-image:var(--hero-sm); border-radius:20px; }
  body:not([data-page="admin"]) main.shell > .hero::before, body:not([data-page="admin"]) main.shell > .live-hero::before {
    background:linear-gradient(180deg,rgba(5,11,24,.38) 0%,rgba(5,11,24,.7) 50%,rgba(5,11,24,.93) 100%); }
}

/* Buttons that sit on a photo banner. */
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn-primary, .btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px; font:600 14px Montserrat,sans-serif; text-decoration:none; transition:transform .15s ease,background .15s ease; }
.btn-primary { background:#59d8b2; color:#06121f; }
.btn-primary:hover { background:#7ce5c6; transform:translateY(-1px); }
.btn-ghost { border:1px solid rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost:hover { background:rgba(255,255,255,.14); }
.hero-facts-row { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.hero-facts-row li { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(5,11,24,.35); color:#e9eef7; font-size:13px; font-weight:600; }
.hero-facts-row svg { width:16px; height:16px; color:#59d8b2; }

/* ---------- Cards ---------- */
body:not([data-page="admin"]) .panel, body:not([data-page="admin"]) .legal-copy, body[data-page="profile"] .pf-card {
  border:1px solid rgba(15,23,42,.06); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
body:not([data-page="admin"]) .console-grid .panel { box-shadow:var(--shadow-card); }
body:not([data-page="admin"]) .empty { padding:30px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); color:var(--text-soft); }
body:not([data-page="admin"]) .empty strong { display:block; margin-bottom:4px; color:var(--text); font:700 18px Syne,sans-serif; letter-spacing:-.02em; }

/* ---------- Home: action tiles ---------- */
.tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 22px; }
.tile { display:flex; flex-direction:column; gap:12px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); color:var(--text); text-decoration:none; box-shadow:var(--shadow-card); transition:transform .18s ease,border-color .18s ease; }
.tile:hover { transform:translateY(-3px); border-color:#59d8b2; }
.tile-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:rgba(89,216,178,.14); color:#2fbf94; }
.tile-icon svg { width:24px; height:24px; }
.tile h2 { font-size:22px; letter-spacing:-.03em; }
.tile p { margin:0; color:var(--text-soft); font-size:14px; line-height:1.6; }
.tile-go { margin-top:auto; color:var(--accent); font-size:13px; font-weight:700; }
.cta-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; padding:24px 28px; border:1px dashed var(--line); border-radius:var(--radius-card); color:var(--text-soft); }
.cta-strip strong { display:block; color:var(--text); font:700 20px Syne,sans-serif; letter-spacing:-.02em; }
.cta-strip .btn-primary { flex:none; }
@media (max-width:900px) { .tiles { grid-template-columns:1fr; } }

/* ---------- Registration: event on the left, form on the right ---------- */
.reg-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr); gap:clamp(24px,4vw,44px); align-items:start; }
.reg-main .event { margin:0; padding:0; border:0; }
.reg-main .event-banner { float:none; display:block; width:100%; height:auto; aspect-ratio:16/9; margin:0 0 22px; border-radius:16px; object-fit:cover; }
.reg-main .event h2 { margin-bottom:12px; }
.reg-more { margin:6px 0 14px; }
.reg-more summary { color:var(--blue); cursor:pointer; font-size:14px; font-weight:600; }
.reg-more[open] summary { margin-bottom:10px; }
.reg-main .event-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0 0; }
.reg-main .event-gallery img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.reg-main .event-gallery figcaption { font-size:11px; }
.reg-side { position:sticky; top:20px; display:grid; gap:14px; padding:24px; border:1px solid #e3e8ef; border-radius:18px; background:#f6f8fb; }
.reg-side h3 { margin:0; color:var(--ink); font:700 22px Syne,sans-serif; letter-spacing:-.03em; }
.reg-side .capacity { margin:0; }
.reg-side .calendar-links { margin:0; }
.reg-side .fields { grid-template-columns:1fr; }
.reg-side form .button { justify-self:stretch; padding:15px 18px; border-radius:999px; font-size:14px; }
@media (max-width:900px) {
  .reg-grid { grid-template-columns:1fr; }
  .reg-side { position:static; }
  .reg-main .event-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Sign-in card under the banner ---------- */
body[data-page="profile"] main.shell > .hero + .pf-card { margin:-64px auto 0 clamp(16px,5vw,60px); position:relative; z-index:1; }
@media (max-width:900px) { body[data-page="profile"] main.shell > .hero + .pf-card { margin:-40px 12px 0; } }

/* ---------- Footer photo credits ---------- */
.site-foot-inner .foot-credits { flex-basis:100%; order:3; color:var(--text-faint); font-size:11px; }
.site-foot-inner .foot-credits a { color:inherit; font-weight:500; text-decoration:underline; }

/* Registration card details: readable seat count, checkbox labels that wrap like normal text. */
.reg-side .capacity { display:block; padding:10px 14px; border:1px solid #bfeedd; border-radius:12px; background:#e8faf3; color:#126445; font-size:13px; line-height:1.5; }
html body .reg-side .capacity b { color:#0b7a59; }
.reg-side .check { display:block; padding-left:26px; text-indent:-26px; line-height:1.5; }
.reg-side .check input { margin:0 10px 0 0; vertical-align:-2px; }

/* Phones: compact tiles (icon beside the text); the logo already links back, so the text link can go on small screens. */
@media (max-width:640px) {
  .tile { display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:6px; padding:18px; }
  .tile-icon { grid-row:span 3; width:44px; height:44px; }
  .tile h2 { font-size:19px; }
  .tile p { font-size:13px; }
  .cta-strip { padding:20px; }
}
@media (max-width:420px) { body:not([data-page="admin"]) main.shell > .nav .back { display:none; } }