/*
Theme Name: Akademia Opieki Żywieniowej – Webinar
Theme URI: https://example.com/
Author: Robert Dorosz
Description: Responsywny, minimalistyczny szablon landing page webinaru dla Akademii Opieki Żywieniowej.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: akademia-webinar
*/
:root {
  --navy: #092b60;
  --blue: #15549a;
  --sky: #6da9e5;
  --pale: #eaf5fc;
  --ink: #122b53;
  --muted: #60718c;
  --white: #fff;
  --line: #d7e7f5;
  --radius: 28px;
  --shadow: 0 18px 50px rgba(10, 48, 95, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body {
    outline: 8px solid red !important;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.container { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
.site-header { padding: 24px 0; background: rgba(255,255,255,.96); }
.brand-row { display: flex; align-items: center; gap: 26px; }
.fresenius-brand { display: flex; align-items: center; gap: 12px; color: var(--navy); font-weight: 800; font-size: clamp(19px, 2.2vw, 29px); letter-spacing: -.8px; white-space: nowrap; }
.fresenius-mark { display: inline-flex; flex-direction: column; gap: 4px; width: 38px; }
.fresenius-mark i { display: block; height: 5px; background: var(--navy); transform: skewX(-22deg); }
.fresenius-mark i:nth-child(1) { width: 36px; }
.fresenius-mark i:nth-child(2) { width: 28px; }
.fresenius-mark i:nth-child(3) { width: 20px; }
.brand-divider { height: 58px; width: 1px; background: #9fc4e7; }
.academy-logo { display: block; width: 270px; max-height: 86px; object-fit: contain; object-position: left center; }
.hero { position: relative; overflow: hidden; padding: 48px 0 64px; background: radial-gradient(ellipse at 85% 22%, #eaf6fc 0, rgba(234,246,252,.6) 28%, transparent 55%), linear-gradient(110deg,#fff 0%,#fff 53%,#f1f8fd 100%); }
.hero::after { content: ""; position: absolute; right: -130px; bottom: -170px; width: 480px; height: 480px; border: 1px solid rgba(109,169,229,.35); border-radius: 48% 52% 58% 42%; transform: rotate(26deg); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); align-items: center; gap: 38px; }
.eyebrow { display: flex; align-items: center; gap: 16px; color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 22px; }
.eyebrow::after { content: ""; width: 70px; height: 1px; background: #8db8e2; }
.intro { margin: 0 0 14px; font-size: clamp(20px, 2vw, 25px); }
h1 { margin: 0; max-width: 730px; color: var(--navy); font-size: clamp(35px, 4.5vw, 58px); line-height: 1.08; letter-spacing: -1.7px; font-weight: 800; }
h1 span { color: var(--sky); }
.hero-copy { color: var(--muted); max-width: 640px; margin: 20px 0 0; font-size: 17px; }
.hero-visual { position: relative; min-height: 390px; display: flex; align-items: center; justify-content: center; }
.visual-circle { width: min(100%, 420px); aspect-ratio: 1 / 1; border-radius: 48% 52% 55% 45%; background: linear-gradient(145deg,#e4f3fc,#b8d9f2); position: relative; overflow: hidden; }
.visual-circle::before, .visual-circle::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.85); border-radius:50%; }
.visual-circle::before { inset: 24px; }
.visual-circle::after { inset: 50px; }
.visual-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.visual-icon svg { width: 46%; height:auto; opacity:.88; }
.visual-caption { position:absolute; right: 0; top: 24px; max-width: 155px; color: var(--navy); font-size: 11px; line-height: 1.8; letter-spacing: .2em; text-transform: uppercase; }
.event-meta { display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 28px; }
.meta-item { display:flex; align-items:center; gap:12px; padding: 0 22px; border-right:1px solid #c8dff2; color:var(--navy); font-weight:700; }
.meta-item:first-child { padding-left:0; }
.meta-item:last-child { border:0; }
.meta-item svg { width:29px; height:29px; flex:0 0 auto; stroke:#5797d6; }
.meta-item small { display:block; font-size:13px; font-weight:400; color:var(--muted); }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:62px; padding: 16px 30px; border-radius:999px; background:linear-gradient(110deg,#064b98,#0a3471); color:#fff; text-decoration:none; font-weight:800; letter-spacing:.04em; box-shadow:0 12px 28px rgba(7,61,126,.18); transition:transform .2s, box-shadow .2s; }
.cta:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(7,61,126,.25); color:#fff; }
.cta-arrow { font-size:24px; line-height:1; }
.cta-note { color:var(--muted); font-size:13px; margin:12px 0 0 4px; }
.expert-section { background:linear-gradient(110deg,#eff8fd,#e6f3fc); border-radius:var(--radius); padding:36px; display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:center; margin-top: -1px; }
.expert-photo { min-height:245px; border-radius:18px; background:linear-gradient(145deg,#d7e7f3,#b8cfe2); display:flex; align-items:center; justify-content:center; color:#6c91b4; overflow:hidden; }
.expert-photo svg { width:120px; height:140px; opacity:.75; }
.expert-copy h2 { margin:0 0 12px; font-size:clamp(25px,3vw,34px); color:var(--navy); line-height:1.2; letter-spacing:-.7px; }
.expert-copy p { max-width:650px; margin:0; color:var(--muted); font-size:17px; }
.short-line { width:52px; height:2px; background:var(--blue); margin:18px 0; }
.topics { padding:58px 0 66px; }
.section-title { margin:0 0 30px; display:flex; align-items:center; gap:18px; font-size:13px; color:var(--navy); font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.section-title::after { content:""; height:1px; width:64px; background:#8db8e2; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.topic { text-align:center; padding:0 22px; border-right:1px solid #cde2f4; }
.topic:last-child { border-right:0; }
.topic-icon { width:84px; height:84px; margin:0 auto 15px; border-radius:50%; background:#e8f5fd; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.topic-icon svg { width:40px; height:40px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.topic p { margin:0; color:var(--navy); font-size:16px; line-height:1.45; }
.footer-band { background:linear-gradient(105deg,#1260a5,#07356f); color:#fff; border-radius:var(--radius) var(--radius) 0 0; padding:36px 0; overflow:hidden; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-message { font-size:clamp(20px,2.4vw,28px); line-height:1.35; max-width:440px; }
.footer-message small { display:block; margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.footer-values { display:flex; align-items:center; gap:26px; }
.footer-value { min-width:100px; text-align:center; padding-left:24px; border-left:1px solid rgba(255,255,255,.45); font-size:11px; letter-spacing:.18em; }
.footer-value:first-child { border-left:0; }
.footer-value svg { display:block; width:32px; height:32px; margin:0 auto 10px; stroke:#fff; fill:none; stroke-width:1.6; }
.site-footer { padding:18px 0; text-align:center; font-size:12px; color:#73829a; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr .7fr; gap:20px; }
  .hero-visual { min-height:300px; }
  .meta-item { padding:0 13px; }
  .expert-section { grid-template-columns:180px 1fr; gap:24px; padding:28px; }
  .expert-photo { min-height:210px; }
  .topic { padding:0 14px; }
  .footer-values { gap:12px; }
  .footer-value { min-width:80px; padding-left:12px; }
}
@media (max-width: 650px) {
  .container { width:min(100% - 32px, 520px); }
  .site-header { padding:18px 0; }
  .brand-row { gap:13px; flex-wrap:wrap; }
  .fresenius-brand { font-size:18px; gap:8px; }
  .fresenius-mark { width:28px; }
  .fresenius-mark i { height:4px; }
  .fresenius-mark i:nth-child(1) { width:27px; }
  .fresenius-mark i:nth-child(2) { width:21px; }
  .fresenius-mark i:nth-child(3) { width:15px; }
  .brand-divider { height:45px; }
  .academy-logo { width:min(220px, calc(100% - 160px)); }
  .hero { padding:32px 0 42px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:210px; grid-row:1; }
  .visual-circle { width:210px; }
  .visual-caption { top:10px; right:0; font-size:9px; max-width:115px; }
  .intro { font-size:19px; }
  h1 { font-size:clamp(34px,10vw,46px); letter-spacing:-1px; }
  .hero-copy { font-size:15px; }
  .event-meta { gap:14px 0; margin:24px 0; }
  .meta-item { padding:0 12px; font-size:14px; }
  .meta-item:first-child { padding-left:0; }
  .meta-item svg { width:24px; height:24px; }
  .meta-item small { font-size:12px; }
  .cta { width:100%; padding:15px 18px; font-size:13px; min-height:58px; }
  .expert-section { grid-template-columns:1fr; padding:22px; gap:20px; border-radius:20px; }
  .expert-photo { min-height:170px; }
  .expert-copy h2 { font-size:27px; }
  .expert-copy p { font-size:15px; }
  .topics { padding:42px 0; }
  .topic-grid { grid-template-columns:repeat(2,1fr); gap:24px 0; }
  .topic:nth-child(2) { border-right:0; }
  .topic { padding:0 12px; }
  .topic-icon { width:70px; height:70px; }
  .topic p { font-size:14px; }
  .footer-band { border-radius:20px 20px 0 0; padding:30px 0; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-message { font-size:23px; }
  .footer-values { width:100%; justify-content:space-between; gap:8px; }
  .footer-value { flex:1; min-width:0; font-size:9px; letter-spacing:.1em; padding-left:8px; }
}


/* Grafika hero: wygenerowane zdjęcie pielęgniarki */
.hero-visual { min-width: 0; }
.hero-nurse-image {
  display: block;
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: 78% center;
  border-radius: 42% 18px 18px 42%;
  box-shadow: 0 18px 48px rgba(10, 48, 95, .10);
}
.visual-caption {
  z-index: 2;
  top: 14px;
  right: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .hero-nurse-image { height: 340px; }
}
@media (max-width: 650px) {
  .hero-visual { min-height: 0; }
  .hero-nurse-image {
    width: 100%;
    height: 235px;
    object-position: 78% 35%;
    border-radius: 24px;
  }
  .visual-caption { top: 8px; right: 8px; padding: 8px 10px; }
}


/* === Korekta proporcji po podglądzie wdrożenia === */
.container { width: min(1240px, calc(100% - 64px)); }
.site-header { padding: 28px 0; }
.brand-row { gap: 30px; }
.fresenius-brand { font-size: clamp(22px, 2vw, 30px); }
.academy-logo { width: 300px; max-height: 92px; }
.hero { padding: 58px 0 72px; }
.hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); gap: 52px; }
.eyebrow { font-size: 14px; margin-bottom: 24px; }
.intro { font-size: clamp(21px, 1.8vw, 26px); }
h1 { font-size: clamp(40px, 3.65vw, 52px); line-height: 1.12; letter-spacing: -1.35px; }
.hero-copy { font-size: 17px; line-height: 1.65; }
.hero-visual { min-height: 460px; }
.hero-nurse-image { height: 470px; object-position: 77% center; border-radius: 42% 22px 22px 42%; }
.visual-caption { font-size: 11px; padding: 13px 15px; }
.event-meta { margin: 32px 0 30px; }
.meta-item { padding-inline: 20px; font-size: 16px; }
.meta-item svg { width: 31px; height: 31px; }
.cta { min-height: 68px; padding: 18px 34px; font-size: 15px; }
.cta-note { font-size: 14px; }
.expert-section { grid-template-columns: 250px 1fr; gap: 44px; padding: 42px; border-radius: 30px; margin-top: 2rem; }
.expert-photo { min-height: 260px; }
.expert-copy h2 { font-size: clamp(29px, 2.5vw, 36px); }
.expert-copy p { font-size: 18px; line-height: 1.7; }
.topics { padding: 68px 0 76px; }
.section-title { font-size: 14px; margin-bottom: 38px; }
.topic { padding-inline: 28px; }
.topic-icon { width: 92px; height: 92px; margin-bottom: 18px; }
.topic-icon svg { width: 44px; height: 44px; }
.topic p { font-size: 17px; line-height: 1.55; }
.footer-band { padding: 44px 0; }
.footer-message { font-size: clamp(23px, 2.3vw, 31px); }
.footer-value { font-size: 12px; }

@media (max-width: 900px) {
  .container { width: min(100% - 40px, 760px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, .78fr); gap: 28px; }
  h1 { font-size: clamp(36px, 4.5vw, 44px); }
  .hero-visual { min-height: 340px; }
  .hero-nurse-image { height: 350px; }
  .expert-section { grid-template-columns: 190px 1fr; gap: 26px; padding: 28px; }
  .expert-photo { min-height: 210px; }
  .topic { padding-inline: 15px; }
}
@media (max-width: 650px) {
  .container { width: calc(100% - 36px); }
  .site-header { padding: 17px 0; }
  .brand-row { gap: 12px; }
  .fresenius-brand { font-size: 17px; }
  .brand-divider { height: 42px; }
  .academy-logo { width: min(210px, calc(100vw - 190px)); max-height: 60px; }
  .hero { padding: 30px 0 42px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 25px; }
  .hero-content { order: 1; }
  .hero-visual { order: 0; width: 100%; min-height: 0; }
  .hero-nurse-image { width: 100%; height: 235px; border-radius: 22px; object-position: 77% 34%; }
  .visual-caption { top: 8px; right: 8px; font-size: 9px; padding: 8px 10px; }
  .eyebrow { font-size: 12px; margin-bottom: 16px; }
  .intro { font-size: 19px; }
  h1 { font-size: clamp(34px, 9vw, 43px); line-height: 1.1; letter-spacing: -.9px; }
  .hero-copy { font-size: 15px; }
  .event-meta { gap: 12px 0; }
  .meta-item { padding-inline: 10px; font-size: 13px; }
  .meta-item:first-child { padding-left: 0; }
  .meta-item svg { width: 23px; height: 23px; }
  .cta { width: 100%; font-size: 12px; min-height: 56px; padding: 14px; }
  .expert-section { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .expert-photo { min-height: 150px; }
  .expert-copy h2 { font-size: 26px; }
  .expert-copy p { font-size: 15px; }
  .topics { padding: 40px 0; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .topic { padding: 0 10px; }
  .topic:nth-child(2) { border-right: 0; }
  .topic-icon { width: 68px; height: 68px; }
  .topic-icon svg { width: 34px; height: 34px; }
  .topic p { font-size: 13px; }
  .footer-band { padding: 28px 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 25px; }
  .footer-message { font-size: 22px; }
  .footer-value { font-size: 9px; }
}
/* Pełnoszeroki baner webinaru */
.hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 60px 0;

  background-color: #f2f8fc;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 40%,
      rgba(255, 255, 255, 0.58) 58%,
      rgba(255, 255, 255, 0.05) 100%),
    url("assets/pielegniarka-hero.webp");

  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

/* Tekst po lewej stronie banera */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero-content {
  max-width: 720px;
}

/* Ukrywamy poprzednią wersję zdjęcia */
.hero-visual {
  display: none !important;
}

/* Baner na telefonach */
@media (max-width: 650px) {
  .hero {
    min-height: 0;
    padding: 270px 0 36px;

    background-image: url("assets/pielegniarka-hero.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #fff;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-grid {
    display: block;
  }
}

/* ==========================================
   NAGŁÓWEK I BANER WEBINARU
   ========================================== */

/* Logo na białym panelu, nałożonym na zdjęcie */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0;
  background: transparent;
}

.site-header .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Biały panel z zaokrągleniem po prawej */
.brand-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: fit-content;
  max-width: 100%;
  padding: 18px 42px 22px 54px;

  background: #fff;
  border-radius: 0 0 58px 0;
  box-shadow: 0 8px 28px rgba(14, 58, 100, 0.06);
}

.fresenius-brand {
  font-size: 27px;
  flex-shrink: 0;
}

.brand-divider {
  height: 55px;
  flex-shrink: 0;
}

.academy-logo {
  display: block;
  width: 250px;
  max-height: 76px;
  object-fit: contain;
}

/* Baner ze zdjęciem na całą szerokość */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 690px;
  display: flex;
  align-items: center;

  padding: 155px 0 65px;

  background-color: #f2f8fc;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, .97) 31%,
      rgba(255, 255, 255, .88) 45%,
      rgba(255, 255, 255, .36) 60%,
      rgba(255, 255, 255, .02) 76%),
    url("assets/pielegniarka-hero.webp");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Tekst pozostaje po lewej stronie */
.hero-grid {
  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero-content {
  max-width: 690px;
}

/* Wyłączamy osobne zdjęcie — korzystamy z tła całego banera */
.hero-visual {
  display: none !important;
}

/* Dekoracyjne błękitne łuki po prawej stronie */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;

  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 55% 45% 0 50%;

  transform: rotate(35deg);
}

.hero::before {
  width: 330px;
  height: 520px;
  right: -100px;
  bottom: -245px;
  box-shadow: -14px 0 0 -12px rgba(111, 177, 225, .9);
}

.hero::after {
  width: 245px;
  height: 430px;
  right: -145px;
  bottom: -195px;

  border-color: rgba(109, 169, 229, .8);
  border-width: 2px;
}

/* ==========================================
   WERSJA MOBILNA
   ========================================== */

@media (max-width: 650px) {

  .brand-row {
    gap: 10px;
    padding: 12px 18px 15px 14px;
    border-radius: 0 0 30px 0;
  }

  .fresenius-brand {
    font-size: 15px;
    gap: 7px;
  }

  .fresenius-mark {
    width: 25px;
  }

  .brand-divider {
    height: 35px;
  }

  .academy-logo {
    width: 120px;
    max-height: 43px;
  }

  .hero {
    min-height: 0;
    display: block;
    padding: 270px 0 38px;

    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .02) 190px,
        #fff 270px),
      url("assets/pielegniarka-hero.webp");

    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .hero-grid {
    display: block;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero::before,
  .hero::after {
    width: 130px;
    height: 220px;
    right: -90px;
    bottom: -100px;
  }
}

/* Stopka – kształt i dekoracyjny listek */
.footer-band {
  position: relative;
  overflow: hidden;
  border-radius: 0 32px 0 0 !important;
}

.footer-leaf {
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 155px;
  z-index: 0;
  pointer-events: none;
}

.footer-leaf svg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-inner {
  position: relative;
  z-index: 1;
  padding-left: 120px;
}

/* Mniejsze ekrany */
@media (max-width: 650px) {
  .footer-leaf {
    width: 70px;
    left: auto;
    right: 0;
    bottom: 0;
    opacity: 0.25;
  }

  .footer-inner {
    padding-left: 0;
  }
}