/* ============================================================
   Dél-Olaszország útinapló — mediterrán magazin dizájnrendszer
   Paletta: tengerkék · citrom · terrakotta · meleg papír
   ============================================================ */

:root{
  --bg:#f7f4ed;
  --surface:#fffdf9;
  --ink:#232a28;
  --muted:#6c7570;
  --sea:#1f5f66;
  --sea-deep:#123f47;
  --sea-mist:#e4edeb;
  --lemon:#c8973a;
  --lemon-soft:#f4e7c9;
  --terra:#a4503a;
  --line:#e5dfd1;

  --font-head:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;

  --text-xs:.8rem; --text-sm:.9rem; --text-base:1.0625rem;
  --text-lg:1.25rem; --text-xl:1.75rem; --text-2xl:2.4rem;

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-6:3rem; --space-8:4rem; --space-12:6rem;

  --maxw:1200px;
  --maxw-prose:70ch;
  --radius:16px;
  --shadow:0 10px 30px rgba(11,66,88,.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.68;
  color:var(--ink);background:var(--bg);
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;font-weight:600;letter-spacing:-.01em;}
a{color:inherit;}
p{margin:0;}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:4px;}

.container{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--sea-deep);
  color:#fff;padding:.6rem 1.1rem;border-radius:0 0 10px 0;z-index:200;text-decoration:none;}
.skip-link:focus{left:0;}

/* ---------- Fejléc ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 86%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-2);padding:.75rem 0;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;}
.brand svg{width:34px;height:34px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.14;}
.footer-about{margin-top:var(--space-2);}
.brand strong{font-family:var(--font-head);font-size:1.18rem;font-weight:700;letter-spacing:.01em;}
.brand span{display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);font-weight:500;}

.site-nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.15rem;list-style:none;padding:0;}
.site-nav a{
  display:block;padding:.5rem .7rem;border-radius:999px;text-decoration:none;
  font-size:.87rem;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.site-nav a:hover{background:var(--sea-mist);color:var(--sea-deep);}
.site-nav a[aria-current="page"]{background:var(--sea);color:#fff;}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);cursor:pointer;}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .burger span:nth-child(2){opacity:0;}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1080px){
  .burger{display:flex;}
  .site-nav{position:absolute;top:100%;left:0;right:0;display:none;
    background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(11,66,88,.12);}
  .nav-open .site-nav{display:block;}
  .site-nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem;}
  .site-nav a{padding:.8rem .6rem;border-radius:10px;font-size:1rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;display:grid;align-content:end;
  min-height:74vh;color:#fff;overflow:hidden;
  background:
    radial-gradient(90% 90% at 85% 8%, rgba(242,179,44,.35) 0%, transparent 50%),
    linear-gradient(165deg,#12719a 0%,var(--sea) 45%,var(--sea-deep) 100%);
}
.hero--sub{min-height:56vh;}
.hero-media{position:absolute;inset:0;z-index:-2;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,45,60,.34) 0%,rgba(11,45,60,.12) 40%,rgba(9,38,52,.74) 100%);}
.hero .kicker{text-shadow:0 1px 14px rgba(9,38,52,.65);}
.hero-inner{padding:var(--space-12) 0 calc(var(--space-8) + 46px);}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#ffe9b0;margin-bottom:var(--space-2);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--lemon);border-radius:2px;}
.hero h1{font-size:clamp(2.4rem,6vw,4.3rem);max-width:14ch;
  text-shadow:0 2px 26px rgba(9,38,52,.45);}
.hero .lead{max-width:56ch;margin-top:var(--space-3);font-size:var(--text-lg);
  line-height:1.55;color:#eef6f8;text-shadow:0 1px 14px rgba(9,38,52,.5);}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--space-4);}

.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:52px;display:block;}

/* ---------- Hero-forgó (kezdőlap) ---------- */
.hero--rotator .hero-media .h-slide{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.1s ease;}
.hero--rotator .hero-media .h-slide.is-on{opacity:1;}
.hero-slide-info{margin-top:var(--space-3);}
.hero-slide-info a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;
  color:#ffe9b0;text-decoration:none;font-size:var(--text-sm);
  background:rgba(9,38,52,.42);padding:.55rem 1rem;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hero-slide-info strong{font-family:var(--font-head);font-size:1.05rem;color:#fff;}
.hero-slide-info em{font-style:normal;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;}
.hero-slide-info a:hover em{color:var(--lemon);}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:var(--space-2);}
.hero-chips .chip{border:0;border-radius:999px;padding:.5rem 1rem;font-weight:600;
  font-size:.85rem;font-family:var(--font-body);cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s ease,color .2s ease;}
.hero-chips .chip:hover{background:rgba(255,255,255,.3);}
.hero-chips .chip.is-on{background:var(--lemon);color:#3c2c07;box-shadow:none;}
.hero-chips .chip-pause{border:0;border-radius:999px;width:38px;height:38px;
  cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);font-size:.9rem;line-height:1;}
.hero-chips .chip-pause[aria-pressed="true"]{background:rgba(255,255,255,.35);}

/* ---------- Gombok ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;
  border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;
  background:var(--lemon);color:#3c2c07;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22);}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65);backdrop-filter:blur(4px);}
.btn--sea{background:var(--sea);color:#fff;}

/* ---------- Szekciók ---------- */
.section{padding:var(--space-12) 0;}
.section--tight{padding:var(--space-8) 0;}
.section--mist{background:var(--sea-mist);}
.section-head{max-width:62ch;margin-bottom:var(--space-6);}
.section-head .kicker{color:var(--terra);}
.section-head .kicker::before{background:var(--terra);}
.section-head h2{font-size:clamp(1.7rem,3.4vw,var(--text-2xl));margin-bottom:var(--space-2);}
.section-head p{color:var(--muted);}

/* ---------- Úti cél kártyák ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--space-3);}
.card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;box-shadow:0 2px 10px rgba(11,66,88,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sea-mist);}
.card-media img,.card-media .media-slot{width:100%;height:100%;object-fit:cover;}
.card-media .media-slot{aspect-ratio:auto;border-radius:0;}
.card:hover .card-media img{transform:scale(1.045);}
.card-media img{transition:transform .5s ease;}
.card-tag{position:absolute;top:.9rem;left:.9rem;z-index:2;
  background:rgba(250,247,240,.92);color:var(--sea-deep);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:999px;}
.card-body{padding:var(--space-3);display:flex;flex-direction:column;gap:.55rem;flex:1;}
.card-body h3{font-size:1.35rem;}
.card-body p{color:var(--muted);font-size:var(--text-sm);flex:1;}
.card-more{color:var(--terra);font-weight:600;font-size:var(--text-sm);}
.card:hover .card-more{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Útvonal ---------- */
.route{list-style:none;padding:0;display:grid;gap:var(--space-2);
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));counter-reset:stop;}
.route li{
  counter-increment:stop;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-3);position:relative;
}
.route li::before{
  content:counter(stop);display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:999px;background:var(--lemon);color:#3c2c07;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;margin-bottom:.8rem;
}
.route h3{font-size:1.1rem;margin-bottom:.35rem;}
.route p{font-size:var(--text-sm);color:var(--muted);}

/* ---------- Tipp-kártyák ---------- */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3);}
.tip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-4);}
.tip .tip-ikon{width:44px;height:44px;display:grid;place-items:center;
  background:var(--lemon-soft);border-radius:12px;margin-bottom:var(--space-2);}
.tip h3{font-size:1.15rem;margin-bottom:.5rem;}
.tip p{color:var(--muted);font-size:var(--text-sm);}

/* ---------- Idézet sáv ---------- */
.quote-band{background:var(--sea-deep);color:#eef6f8;text-align:center;
  padding:var(--space-8) 0;}
.quote-band blockquote{font-family:var(--font-head);font-style:italic;
  font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.4;max-width:34ch;margin-inline:auto;}
.quote-band .q-mark{color:var(--lemon);font-size:2.6rem;line-height:0;display:block;
  margin-bottom:1.2rem;font-family:var(--font-head);}

/* ---------- Cikk / próza ---------- */
.article{padding:var(--space-8) 0 var(--space-6);}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--space-6);align-items:start;}
@media (max-width:920px){.article-grid{grid-template-columns:1fr;}}
.prose{max-width:var(--maxw-prose);}
.prose p{margin-bottom:var(--space-3);}
.prose p:last-child{margin-bottom:0;}
.prose .open{font-size:var(--text-lg);line-height:1.6;color:var(--sea-deep);}
.prose strong{color:var(--sea-deep);}

.infobox{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-4);position:sticky;top:92px;
  box-shadow:0 2px 12px rgba(11,66,88,.05);}
.infobox h3{display:flex;align-items:center;gap:.5rem;font-size:1.12rem;
  margin-bottom:var(--space-2);color:var(--sea-deep);}
.infobox h3 svg{flex:none;}
.infobox ul{list-style:none;padding:0;display:grid;gap:.8rem;}
.infobox li{padding-left:1.35rem;position:relative;font-size:var(--text-sm);color:var(--muted);}
.infobox li::before{content:"";position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;
  border-radius:2px;background:var(--lemon);transform:rotate(45deg);}
.infobox li strong{color:var(--ink);}

/* ---------- Galéria ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
  gap:var(--space-3);}
.galeria figure{margin:0;display:flex;flex-direction:column;gap:.55rem;}
.galeria img,.galeria .media-slot{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:0 3px 14px rgba(11,66,88,.10);}
.galeria img{cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease;}
.galeria img:hover{transform:scale(1.015);box-shadow:var(--shadow);}
.galeria figcaption{font-size:var(--text-sm);color:var(--muted);padding-inline:.2rem;}
.galeria--suru{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.galeria--suru figcaption{font-size:.78rem;}
@media (min-width:921px) and (max-width:1200px){
  .site-nav a{padding:.45rem .55rem;font-size:.86rem;}
}
.galeria .wide{grid-column:span 2;}
.galeria .wide img,.galeria .wide .media-slot{aspect-ratio:16/9;}
@media (max-width:640px){.galeria .wide{grid-column:span 1;}
  .galeria .wide img,.galeria .wide .media-slot{aspect-ratio:4/3;}}

/* ---------- Kép-helyőrző ---------- */
.media-slot{
  display:grid;place-items:center;align-content:center;gap:.45rem;text-align:center;
  aspect-ratio:4/3;border-radius:var(--radius);padding:1rem;
  background:
    linear-gradient(135deg,rgba(15,94,127,.06),rgba(242,179,44,.10)),
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(15,94,127,.045) 14px 28px),
    var(--surface);
  border:1.5px dashed color-mix(in srgb,var(--sea) 35%,var(--line));
  color:var(--muted);font-size:var(--text-xs);
}
.media-slot svg{opacity:.55;}
.media-slot strong{font-size:var(--text-sm);color:var(--sea-deep);font-weight:600;}
.media-slot code{font-size:.72rem;background:var(--sea-mist);padding:.15rem .5rem;
  border-radius:6px;color:var(--sea-deep);}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(9,30,40,.92);
  display:grid;place-items:center;padding:4vh 4vw;cursor:zoom-out;}
.lightbox figure{margin:0;display:grid;gap:.9rem;justify-items:center;max-width:min(1200px,94vw);}
.lightbox img{max-width:94vw;max-height:82vh;border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox figcaption{color:#dcebf1;font-size:var(--text-sm);text-align:center;}
.lightbox-close{position:absolute;top:1rem;right:1rem;width:46px;height:46px;
  border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.5rem;cursor:pointer;line-height:1;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.7rem;cursor:pointer;line-height:1;}
.lightbox-nav:hover,.lightbox-close:hover{background:rgba(255,255,255,.28);}
.lightbox-prev{left:1rem;} .lightbox-next{right:1rem;}

/* ---------- Aloldal lapozó ---------- */
.pager{display:flex;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-6) 0 var(--space-8);flex-wrap:wrap;}
.pager a{
  display:flex;flex-direction:column;gap:.2rem;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-2) var(--space-3);min-width:200px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.pager a:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.pager .pager-label{font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);font-weight:600;}
.pager .pager-title{font-family:var(--font-head);font-weight:600;color:var(--sea-deep);}
.pager .next{margin-left:auto;text-align:right;}

/* ---------- Lábléc ---------- */
.site-footer{background:var(--sea-deep);color:#c9dde6;margin-top:var(--space-6);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-6);
  padding:var(--space-8) 0 var(--space-4);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:var(--space-4);}}
.site-footer .brand strong{color:#fff;}
.site-footer .brand span{color:#9fc0cd;}
.site-footer p{font-size:var(--text-sm);max-width:38ch;}
.site-footer h3{color:#fff;font-size:1rem;margin-bottom:var(--space-2);}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.55rem;}
.site-footer a{color:#c9dde6;text-decoration:none;font-size:var(--text-sm);}
.site-footer a:hover{color:var(--lemon);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:var(--space-2) 0 var(--space-3);
  font-size:var(--text-xs);color:#9fc0cd;display:flex;justify-content:space-between;
  gap:var(--space-2);flex-wrap:wrap;}

/* ---------- Beúszás ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
}

@media (max-width:720px){
  :root{--space-12:3.6rem;--space-8:2.8rem;}
  .hero{min-height:64vh;}
  .hero--sub{min-height:48vh;}
  .infobox{position:static;}
}

/* — München–Salzburg kiegészítések — */
.galeria--suru{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.galeria--suru figcaption{font-size:.78rem;}
@media(max-width:600px){
  .galeria--suru{grid-template-columns:1fr 1fr;gap:.6rem;}
  .galeria--suru figcaption{font-size:.68rem;padding:.4rem .5rem .5rem;line-height:1.35;}
}
@media(max-width:760px){
  .hero::after{background:linear-gradient(180deg,rgba(16,30,32,.5) 0%,rgba(16,30,32,.25) 45%,rgba(12,34,38,.8) 100%);}
}
.hero .kicker{text-shadow:0 1px 14px rgba(12,34,38,.6);}
figure.kolcson figcaption{font-style:italic;}
figure.kolcson figcaption a{color:var(--sea);}
.forras-jel{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(31,95,102,.85);
  padding:.15rem .45rem;border-radius:4px;margin-right:.4rem;vertical-align:.05em;}
@media(min-width:980px){#napok .cards{grid-template-columns:repeat(3,1fr);}}

/* ---------- Zárókorrekciók ---------- */
section[id]{scroll-margin-top:5.5rem;}
.section-head p a{color:var(--sea);font-weight:600;}
figure.kolcson figcaption a{white-space:normal;}
@media(max-width:1080px){.site-nav ul{justify-content:flex-start;}}

.site-nav a.szulo{background:var(--sea-mist);color:var(--sea-deep);}