/* =========================================================
   femtolasik.pl — override / dodatki dla theme-femtolasik
   Buduje na medical-editorial: glacial blue laser accent,
   premium minimalist hero, money-page pillars, timeline, sticky CTA.
   ========================================================= */

:root{
  /* Re-balans palety pod laserowy precyzyjny brand */
  --laser:#0EA5E9;          /* glacial / sky — laser */
  --laser-dark:#0284C7;
  --laser-soft:#E0F2FE;
  --bone:#F7F4ED;           /* warm premium */
  --gold:#C9A24A;           /* CTA accent — premium */
  --gold-dark:#A6822E;
}

/* ===== DROPDOWN MENU (sub-menu) ===== */

/* Parent li z sub-menu — relative dla pozycjonowania */
.med-menu .menu-item-has-children{position:relative}

/* Chevron arrow dla parentów z sub-menu */
.med-menu .menu-item-has-children > a::after{
  content:"";display:inline-block;width:.5em;height:.5em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:.45em;
  transition:transform .25s var(--ease);opacity:.7;
  vertical-align:middle
}
.med-menu .menu-item-has-children:hover > a::after,
.med-menu .menu-item-has-children:focus-within > a::after,
.med-menu .menu-item-has-children.is-open > a::after{
  transform:rotate(-135deg) translateY(2px);opacity:1
}

/* Sub-menu — default ukryte */
.med-menu .sub-menu{
  list-style:none;margin:0;padding:.5rem 0;
  position:absolute;top:100%;left:-.6rem;min-width:260px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:60
}

/* Pokaż na hover/focus-within (desktop) */
@media (min-width: 1025px){
  .med-menu > .menu-item-has-children:hover > .sub-menu,
  .med-menu > .menu-item-has-children:focus-within > .sub-menu,
  .med-menu > .menu-item-has-children.is-open > .sub-menu{
    opacity:1;visibility:visible;transform:translateY(0)
  }
  /* invisible bridge by hover nie przerywał gdy myszka idzie z parent → sub */
  .med-menu > .menu-item-has-children::before{
    content:"";position:absolute;left:0;right:0;top:100%;height:10px;
    pointer-events:none
  }
  .med-menu > .menu-item-has-children:hover::before{pointer-events:auto}
}

/* Sub-menu items */
.med-menu .sub-menu li{margin:0}
.med-menu .sub-menu a{
  display:block;padding:.65rem 1.1rem;font-family:var(--font-body);
  font-size:.94rem;font-weight:500;color:var(--fg);white-space:nowrap;
  border-radius:0;transition:background .18s,color .18s,padding-left .18s
}
.med-menu .sub-menu a::after{display:none}
.med-menu .sub-menu a:hover{
  background:var(--teal-soft);color:var(--teal-dark);
  text-decoration:none;padding-left:1.4rem
}
html[data-theme="dark"] .med-menu .sub-menu a:hover{
  background:rgba(63,191,175,.1);color:var(--accent)
}

/* Mobile: sub-menu = inline accordion */
@media (max-width: 1024px){
  .med-menu .sub-menu{
    position:static;background:transparent;border:0;box-shadow:none;
    padding:0;margin:.4rem 0 .8rem .8rem;
    border-left:2px solid var(--rule);
    min-width:0;
    /* hidden by default; toggled by is-open class */
    max-height:0;overflow:hidden;opacity:0;visibility:visible;transform:none;
    transition:max-height .35s var(--ease),opacity .25s var(--ease),margin .25s
  }
  .med-menu .menu-item-has-children.is-open > .sub-menu{
    max-height:600px;opacity:1
  }
  .med-menu .sub-menu a{
    font-size:1rem;padding:.55rem .9rem;white-space:normal
  }
  /* chevron większy na mobile */
  .med-menu > .menu-item-has-children > a::after{
    width:.55em;height:.55em;margin-left:.6em
  }
}

/* Header: spokojniejsza biel z premium feel, brand mark glacial */
.med-brand__mark{
  background:linear-gradient(135deg,var(--laser) 0%,var(--teal-dark) 100%);
  border-radius:10px;
  font-family:"Source Serif 4",serif;
}

/* ===== HERO ===== */
.femto-hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3.5rem);background:linear-gradient(180deg,var(--bone) 0%,#fff 100%)}
html[data-theme="dark"] .femto-hero{background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%)}
.femto-hero__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:860px){.femto-hero__grid{grid-template-columns:1fr;gap:2rem}}
.femto-hero__copy .med-hero__title{margin-top:.5rem;max-width:none}
.femto-hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem;margin-bottom:1.8rem}
.femto-btn--primary{background:var(--ink);color:#fff}
.femto-btn--primary:hover{background:var(--teal-dark)}
.femto-btn--ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.4rem;border-radius:999px;background:transparent;border:1.5px solid var(--rule);color:var(--fg);font-family:var(--font-body);font-weight:600;font-size:.96rem;transition:all .25s var(--ease)}
.femto-btn--ghost:hover{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-dark);text-decoration:none}
html[data-theme="dark"] .femto-btn--ghost:hover{background:rgba(63,191,175,.1)}

.femto-hero__points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--rule);padding-top:1.4rem}
.femto-hero__points li{font-size:.94rem;color:var(--fg-soft);line-height:1.45}
.femto-hero__points strong{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--laser-dark);font-weight:600;margin-bottom:.15rem;letter-spacing:-.01em}
html[data-theme="dark"] .femto-hero__points strong{color:var(--accent)}
@media (max-width:560px){.femto-hero__points{grid-template-columns:1fr;gap:.6rem;padding-top:1rem}}

.femto-hero__visual{display:grid;place-items:center}
.femto-hero__visual svg{width:100%;max-width:380px;height:auto}
@media (max-width:860px){.femto-hero__visual{order:-1}.femto-hero__visual svg{max-width:240px}}

/* ===== PILLAR MONEY CARDS ===== */
.femto-pillars{padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
.femto-pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
@media (max-width:880px){.femto-pillars__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.femto-pillars__grid{grid-template-columns:1fr}}

.femto-pillar-card{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.femto-pillar-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(11,46,74,.12),0 4px 10px rgba(11,46,74,.05);border-color:var(--laser)}
html[data-theme="dark"] .femto-pillar-card:hover{box-shadow:0 12px 32px -8px rgba(0,0,0,.5)}
.femto-pillar-card__link{display:block;color:var(--fg)}
.femto-pillar-card__media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--laser-soft),var(--teal-soft));position:relative}
.femto-pillar-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.femto-pillar-card:hover .femto-pillar-card__media img{transform:scale(1.05)}
.femto-pillar-card__media--svg{display:grid;place-items:center}
.femto-pillar-card__num{font-family:"Source Serif 4",serif;font-style:italic;font-weight:300;font-size:6rem;letter-spacing:-.04em;color:var(--laser-dark);opacity:.55}
html[data-theme="dark"] .femto-pillar-card__num{color:var(--accent);opacity:.45}
.femto-pillar-card__body{padding:1.2rem 1.4rem 1.6rem}
.femto-pillar-card__title{font-family:var(--font-display);font-size:1.22rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0 0 .5rem;color:var(--fg)}
.femto-pillar-card__excerpt{color:var(--fg-soft);font-size:.96rem;margin:0 0 .85rem;line-height:1.55}
.femto-pillar-card__cta{font-family:var(--font-body);font-weight:600;font-size:.88rem;color:var(--laser-dark);letter-spacing:.01em;display:inline-flex;align-items:center;gap:.3rem;transition:gap .25s}
html[data-theme="dark"] .femto-pillar-card__cta{color:var(--accent)}
.femto-pillar-card:hover .femto-pillar-card__cta{gap:.55rem}

/* ===== HOW IT WORKS TIMELINE ===== */
.femto-how{background:var(--paper-2);padding:clamp(3rem,5vw,4.5rem) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:clamp(2rem,4vw,3rem)}
html[data-theme="dark"] .femto-how{background:var(--bg-alt)}
.femto-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem);counter-reset:step}
@media (max-width:880px){.femto-timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.femto-timeline{grid-template-columns:1fr}}
.femto-timeline > li{position:relative;padding:1.4rem 1.4rem 1.5rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);border-top:3px solid var(--laser)}
.femto-timeline__num{position:absolute;top:-18px;right:1.2rem;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--laser),var(--teal));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;box-shadow:0 4px 10px rgba(14,165,233,.3)}
.femto-timeline h3{font-family:var(--font-display);font-size:1.18rem;margin:.6rem 0 .55rem;letter-spacing:-.005em;color:var(--fg)}
.femto-timeline p{color:var(--fg-soft);font-size:.96rem;margin:0;line-height:1.55}
.femto-how__note{text-align:center;margin-top:2.2rem;color:var(--fg-soft);font-size:.94rem}
.femto-how__note a{color:var(--laser-dark);font-weight:600}
html[data-theme="dark"] .femto-how__note a{color:var(--accent)}

/* ===== PILLAR PAGE TEMPLATE ===== */
.femto-pillar-page__hero{padding:clamp(2.5rem,5vw,4rem) 0 2rem;background:linear-gradient(180deg,var(--bone) 0%,#fff 100%);border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
html[data-theme="dark"] .femto-pillar-page__hero{background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%)}
.femto-pillar-page__hero::after{content:"";position:absolute;top:-20%;right:-15%;width:600px;height:600px;background:radial-gradient(closest-side,rgba(14,165,233,.13),transparent 70%);pointer-events:none}
.femto-pillar-page__title{font-family:var(--font-display);font-size:clamp(2.1rem,4.5vw,3.4rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;max-width:24ch;margin:.5rem 0 1.2rem;color:var(--fg);position:relative;z-index:1}
.femto-pillar-page__lead{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.5;color:var(--fg-soft);max-width:60ch;margin:0 0 1.4rem;position:relative;z-index:1}
.femto-pillar-page__meta{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.88rem;color:var(--muted)}
.femto-pillar-page__meta time{white-space:nowrap}
.femto-pillar-page__layout{max-width:1000px;display:grid;grid-template-columns:240px 1fr;gap:3rem;padding:3rem 0 4rem}
@media (max-width:920px){.femto-pillar-page__layout{grid-template-columns:1fr;gap:1.5rem}}
.femto-pillar-page__content{max-width:760px;font-size:1.08rem;line-height:1.78}
.femto-pillar-page__content > p:first-of-type::first-letter{font-family:var(--font-display);font-size:4em;line-height:.88;float:left;padding:.08em .14em 0 0;color:var(--laser);font-weight:600}
.femto-pillar-page__content h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.55rem,2.4vw,1.9rem);margin:2.4em 0 .9em;padding-bottom:.5rem;border-bottom:1px solid var(--line-soft);letter-spacing:-.005em;color:var(--fg)}
.femto-pillar-page__content h2::before{content:"";display:inline-block;width:8px;height:8px;background:var(--laser);border-radius:50%;margin-right:.6rem;transform:translateY(-.15em)}
.femto-pillar-page__content h3{font-family:var(--font-display);font-weight:600;font-size:1.32rem;margin:1.7em 0 .7em;color:var(--fg)}
.femto-pillar-page__content h3::before{content:"";display:inline-block;width:14px;height:2px;background:var(--laser);margin-right:.65rem;vertical-align:middle;border-radius:2px}
.femto-pillar-page__content a{color:var(--laser-dark);border-bottom:1px solid color-mix(in srgb, var(--laser) 35%, transparent);font-weight:500;transition:all .2s}
.femto-pillar-page__content a:hover{color:var(--teal-dark);border-bottom-color:var(--teal-dark);text-decoration:none;background:var(--laser-soft)}
html[data-theme="dark"] .femto-pillar-page__content a{color:var(--accent)}
html[data-theme="dark"] .femto-pillar-page__content a:hover{background:rgba(63,191,175,.1)}

/* ===== STICKY CTA (pillar pages + single) ===== */
.femto-cta-sticky{position:fixed;bottom:1.2rem;right:1.2rem;z-index:60;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:0 12px 36px -8px rgba(11,46,74,.18),0 4px 14px rgba(11,46,74,.08);padding:1rem 1.2rem;max-width:320px;font-family:var(--font-body);transform:translateY(120%);transition:transform .35s var(--ease);pointer-events:none}
html[data-theme="dark"] .femto-cta-sticky{background:var(--bg-alt);box-shadow:0 12px 36px -8px rgba(0,0,0,.5)}
.femto-cta-sticky.is-visible{transform:translateY(0);pointer-events:auto}
.femto-cta-sticky__title{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--fg);margin:0 0 .3rem}
.femto-cta-sticky__desc{font-size:.86rem;color:var(--fg-soft);margin:0 0 .8rem;line-height:1.4}
.femto-cta-sticky__btn{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;font-size:.88rem;padding:.5rem .9rem;background:var(--ink);color:#fff;border-radius:999px;transition:background .2s}
.femto-cta-sticky__btn:hover{background:var(--teal-dark);color:#fff;text-decoration:none}
.femto-cta-sticky__close{position:absolute;top:.4rem;right:.4rem;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:.25rem;font-size:1rem;line-height:1}
.femto-cta-sticky__close:hover{color:var(--fg)}
@media (max-width:560px){.femto-cta-sticky{left:.7rem;right:.7rem;bottom:.7rem;max-width:none}}

/* ===== Section-head — wzbogacenie ===== */
.med-section-head h2{font-family:"Source Serif 4",serif}
.med-section-head p.med-eyebrow{font-size:.74rem;color:var(--laser-dark)}
html[data-theme="dark"] .med-section-head p.med-eyebrow{color:var(--accent)}

/* ===== Brand mark dla femtolasik (gdy brak custom logo) ===== */
.femto-brand-mark{display:inline-flex;align-items:center;gap:.7rem;color:var(--fg)}
.femto-brand-mark__icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--laser),var(--teal-dark));color:#fff;font-family:var(--font-display);font-weight:700}
.femto-brand-mark__name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.femto-brand-mark__name em{font-style:italic;color:var(--laser-dark)}
html[data-theme="dark"] .femto-brand-mark__name em{color:var(--accent)}