/* ════════════════════════════════════════════════════════════
   THEME · maree  —  nakładka na _core/assets/base.css
   (paleta :root + warstwa tożsamości; base żyje w rdzeniu)
   ════════════════════════════════════════════════════════════ */

:root {
  --paper:       #F4EFE7;
  --paper-2:     #EAE1D2;
  --rose:        #E0785A;   /* coral akcent */
  --rose-deep:   #C75E40;   /* coral głębszy */
  --rose-pale:   #F7E6DD;   /* coral mgła */
  --ink:         #15333B;   /* morski granat = tekst */
  --ink-2:       #3E5B62;
  --ink-3:       #7C8E91;
  --ink-4:       #C3C8C2;
  --line:        rgba(21, 51, 59, .10);

  --sea:         #143A44;   /* dark hero / sekcje inwersyjne */
  --sea-2:       #0E2A32;
  --sand:        #D8C3A5;   /* piasek / drugorzędny akcent */

  --f-serif: 'Italiana', 'Times New Roman', serif;
  --f-sans:  'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --max:    1240px;
  --gutter: max(24px, 5vw);

  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease:      cubic-bezier(.16, .84, .24, 1);
  --t-fast:    .25s var(--ease);
  --t-mid:     .45s var(--ease);
  --t-slow:    .8s var(--ease);
}

/* ════════════════════════════════════════════════════════════
   ░░ AURORA MARÉE — warstwa tożsamości (override) ░░
   Côte d'Azur: ciemne morskie hero, słońce nad falami, koral
   ════════════════════════════════════════════════════════════ */

/* — typografia: Italiana lubi większy tracking — */
h1, h2, h3, h4 { letter-spacing: .005em; }
.eyebrow { color: var(--rose-deep); letter-spacing: .26em; }
::selection { background: var(--rose); color: #fff; }

/* — NAV: koralowe podkreślenie linków, znak = słoneczna kropka — */
.nav { background: rgba(244, 239, 231, .80); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__logo-mark { background: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale); }
.nav__logo-text { font-family: var(--f-serif); letter-spacing: .04em; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1.5px; background: var(--rose); transition: right var(--t-mid);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }

/* ─────────────────────────────────────────────
   HERO — odwrócone: głębokie morze, jasny tekst
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(224,120,90,.30) 0%, rgba(224,120,90,0) 46%),
    linear-gradient(165deg, var(--sea) 0%, var(--sea-2) 100%);
  color: #F4EFE7;
  overflow: hidden;
}
/* delikatna „linia wody” na dole hero */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to top, rgba(244,239,231,.10), transparent);
  pointer-events: none;
}
.hero .eyebrow { color: #E9B19C; }
.hero__title { color: #FBF7F0; }
.hero__title em { color: var(--rose); font-style: italic; }
.hero__lede { color: rgba(244,239,231,.78); }
.hero__badge {
  background: rgba(244,239,231,.08);
  border: 1px solid rgba(244,239,231,.20);
  color: rgba(244,239,231,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__badge strong { color: #FBE3C7; }
.hero__badge-stars { color: var(--rose); }

/* przyciski w hero na ciemnym tle */
.hero .btn--primary { background: var(--rose); border-color: var(--rose); color: #2A1208; }
.hero .btn--primary:hover { background: #fff; border-color: #fff; color: var(--sea); }
.hero .btn--ghost { border-color: rgba(244,239,231,.40); color: #F4EFE7; }
.hero .btn--ghost:hover { background: #F4EFE7; color: var(--sea); }

/* ── FRAME: scena „słońce nad morzem” ── */
.frame {
  position: relative; aspect-ratio: 1 / 1.04; border-radius: 999px 999px 28px 28px;
  background: linear-gradient(180deg, #1C4A56 0%, #0E2A32 62%, #0B232A 100%);
  border: 1px solid rgba(244,239,231,.16);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(8,24,30,.85);
}
.frame__sun {
  position: absolute; top: 16%; left: 50%; width: 46%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FBE3C7 0%, #F4B488 38%, var(--rose) 70%, #C75E40 100%);
  box-shadow: 0 0 60px 8px rgba(224,120,90,.45);
  animation: maree-rise 6s var(--ease) infinite alternate;
}
.frame__wave {
  position: absolute; left: -10%; right: -10%; height: 40%; border-radius: 50% 50% 0 0;
  background: rgba(244,239,231,.06);
  border-top: 1.5px solid rgba(244,239,231,.18);
}
.frame__wave--1 { bottom: -6%;  transform: scaleX(1.2); animation: maree-sway 7s ease-in-out infinite alternate; }
.frame__wave--2 { bottom: -18%; background: rgba(224,120,90,.10); animation: maree-sway 9s ease-in-out infinite alternate-reverse; }
.frame__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 36px; }
.frame__big { font-family: var(--f-serif); font-size: clamp(44px, 7vw, 76px); color: #FBF7F0; line-height: .9; }
.frame__big em { font-style: italic; color: #FBE3C7; }
.frame__sub { font-family: var(--f-sans); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: rgba(244,239,231,.7); margin-top: 12px; }

@keyframes maree-rise { from { transform: translateX(-50%) translateY(6px); } to { transform: translateX(-50%) translateY(-8px); } }
@keyframes maree-sway { from { transform: translateX(-3%) scaleX(1.2); } to { transform: translateX(3%) scaleX(1.2); } }

/* ─────────────────────────────────────────────
   SERVICES — edytorialowe: wielki koralowy indeks
   ───────────────────────────────────────────── */
.svc-tab.is-active { color: var(--rose-deep); border-color: var(--rose-deep); }
.svc__name { position: relative; }
.svc::before {
  content: attr(data-srv-id);
  position: absolute; top: -10px; right: 0;
  font-family: var(--f-serif); font-size: clamp(64px, 12vw, 150px); line-height: .8;
  color: var(--rose); opacity: .14; pointer-events: none; z-index: 0;
}
.svc { position: relative; }
.svc__main, .svc__aside { position: relative; z-index: 1; }
.svc__facts dd { color: var(--rose-deep); }

/* ── ATELIER: koralowo-piaskowy pierścień, portret okrągły ── */
.member__portrait {
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(150deg, var(--member-tone, var(--rose)) 0%, var(--sand) 100%);
  box-shadow: inset 0 0 0 1px rgba(21,51,59,.06), 0 18px 40px -22px rgba(21,51,59,.5);
}
.member__init { font-family: var(--f-serif); color: var(--sea); }
.member__btn { color: var(--rose-deep); }

/* ─────────────────────────────────────────────
   VOICES — morskie karty z koralowym cudzysłowem
   ───────────────────────────────────────────── */
.voices { background: linear-gradient(180deg, var(--paper) 0%, #EFE7D9 100%); }
.vcard { background: #fff; border: 1px solid var(--line); border-radius: 6px 6px 22px 6px; box-shadow: 0 24px 50px -36px rgba(21,51,59,.45); }
.vcard__mark { color: var(--rose); }
.vcard__stars { color: var(--rose); }
.voices__google span:first-child { color: var(--rose-deep); }

/* ── GALERIA: koralowy ghost na placeholderach ── */
.gphoto--placeholder { background: linear-gradient(135deg, var(--paper-2), var(--rose-pale)); }

/* ── CONTACT: morski blok godzin ── */
.contact__hours { background: var(--sea); color: #F4EFE7; border-radius: 6px 6px 24px 6px; }
.contact__hours-label, .contact__hours td { color: rgba(244,239,231,.82); }
.contact__hours tr.is-today { color: #fff; }
.contact__hours tr.is-today td { color: var(--rose); font-weight: 600; }

/* ── FOOTER: ciemne morze na zakończenie ── */
.footer { background: var(--sea-2); color: rgba(244,239,231,.78); }
.footer a { color: rgba(244,239,231,.78); }
.footer a:hover { color: var(--rose); }
.footer__logo-mark { background: var(--rose); }
.footer__col-label { color: rgba(244,239,231,.5); }
.footer__bottom { border-top-color: rgba(244,239,231,.12); }

/* ── FLOATING CTA: koral ── */
.float-cta { background: var(--rose); color: #2A1208; }
.float-cta:hover { background: var(--sea); color: #F4EFE7; }

/* ── DRAWER akcenty ── */
.drawer__title em { color: var(--rose-deep); }
.drawer__steps span.is-active { color: var(--rose-deep); }
.opt:hover { border-color: var(--rose); }
.opt.is-selected { border-color: var(--rose-deep); background: var(--rose-pale); }
.slot.is-selected, .datebar__day.is-selected { background: var(--sea); color: #F4EFE7; border-color: var(--sea); }
.success__mark { background: var(--rose); color: #2A1208; }