/* Pagrindinio puslapio sekcijos (perkelta iš homepage-premium/index.html). Bendri tokenai ir komponentai – site.css. */
/* ==========================================================================
   1. Pirmoji sekcija
   ========================================================================== */
.hero{padding:var(--frame)}
.hero__frame{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  min-height:max(620px,calc(100svh - var(--frame) * 2));
  display:flex;align-items:flex-end;background:#1A1A1A;color:#fff;
  transform-origin:50% 100%;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero__frame::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.56) 32%,rgba(0,0,0,.16) 62%,rgba(0,0,0,0) 80%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 62%);
}
.hero__content{
  width:100%;max-width:calc(var(--max) + 40px);margin:0 auto;
  padding:140px calc(var(--gutter) + 8px) clamp(36px,6vw,76px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px 48px;
}
.hero__label{display:block;margin-bottom:22px;font:600 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.75rem,1.2rem + 6vw,6.6rem);
  line-height:.96;letter-spacing:-.035em;max-width:11.5ch;
  font-variation-settings:"opsz" 144;text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:330}
.hero__text{margin-top:24px;max-width:44ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;color:rgba(255,255,255,.9)}
.hero__actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hero .link-arrow{color:#fff}
.hero .link-arrow .circle{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hero__caption{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:999px;
  background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  font-size:.85rem;color:rgba(255,255,255,.92);white-space:nowrap;
}
.hero__caption .i{width:16px;height:16px}
.hero :focus-visible{outline-color:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.5)}

/* Įžanginis judesys */
.hero__img{animation:settle 2.4s var(--ease-out) both}
[data-rise]{animation:rise 1.2s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes settle{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ==========================================================================
   2. Kryptys
   ========================================================================== */
.dest-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(220px,19vw,272px);gap:clamp(10px,1.2vw,16px);
}
.dest{position:relative;isolation:isolate;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--surface);color:#fff}
.dest:nth-child(1){grid-column:span 6;grid-row:span 2}
.dest:nth-child(2){grid-column:span 3;grid-row:span 2}
.dest:nth-child(3),.dest:nth-child(4){grid-column:span 3}
.dest:nth-child(5){grid-column:span 7}
.dest:nth-child(6){grid-column:span 5}
.dest img{position:absolute;left:0;top:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.dest::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,0) 62%)}
.dest:hover img{transform:scale(1.05)}
.dest__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.js .dest .dest__body{opacity:0;translate:0 16px;transition:opacity 1s var(--ease-out) calc(var(--d,0ms) + 500ms),translate 1.1s var(--ease-out) calc(var(--d,0ms) + 500ms)}
.js .dest.is-in .dest__body{opacity:1;translate:0 0}
.dest__name{font-family:var(--serif);font-weight:420;font-size:clamp(1.55rem,1rem + 1.3vw,2.35rem);line-height:1;letter-spacing:-.025em;font-variation-settings:"opsz" 96}
.dest:nth-child(1) .dest__name{font-size:clamp(2rem,1rem + 2.8vw,3.6rem)}
.dest__meta{display:block;margin-top:8px;font-size:.9rem;color:rgba(255,255,255,.88)}
.dest__go{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#111;
  transition:transform .6s var(--ease),background-color .5s var(--ease),color .5s var(--ease);
}
.dest:hover .dest__go{transform:translate(3px,-3px) scale(1.05);background:var(--accent);color:#fff}
.dest:focus-visible{outline-color:var(--link)}

/* ==========================================================================
   3. Įkvėpimas
   ========================================================================== */
.stories{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:start}
.feature{position:relative}
.feature .bezel__core{aspect-ratio:5/4}
.feature:hover .bezel__core img{transform:scale(1.035)}
.feature__body{padding:30px 6px 0}
.feature__tag{display:inline-block;margin-bottom:14px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.feature h3{
  margin-top:12px;font-family:var(--serif);font-weight:420;
  font-size:clamp(1.85rem,1.2rem + 1.9vw,2.9rem);line-height:1.06;letter-spacing:-.025em;
  font-variation-settings:"opsz" 120;text-wrap:balance;max-width:24ch;
}
.feature p{margin-top:16px;max-width:58ch;color:var(--ink-2);font-size:1.125rem}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.feature h3 a,.side-story h3 a,.post h3 a,.tip h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.feature:hover h3 a,.side-story:hover h3 a,.post:hover h3 a,.tip:hover h3 a{background-size:100% 1px}

.side-title{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-bottom:16px;border-bottom:1px solid var(--line)}
.side-story{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.side-story .media{aspect-ratio:1;border-radius:var(--r-sm)}
.side-story:hover .media img{transform:scale(1.06)}
.side-story h3{margin-top:8px;font-family:var(--serif);font-weight:450;font-size:1.3rem;line-height:1.18;letter-spacing:-.015em;font-variation-settings:"opsz" 48}
.side-more{margin-top:26px}

/* ==========================================================================
   4. Praktiniai patarimai (fonas pereina į rūką)
   ========================================================================== */
.tips__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,104px)}
.tips__intro{position:sticky;top:120px;align-self:start}
.tips__intro .link-arrow{margin-top:30px}
.tip{
  position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 48px;gap:8px 24px;
  padding:36px 0;align-items:start;
}
.tip::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.js .tip::before{transform:scaleX(0);transition:transform 1.5s var(--ease-out) var(--d,0ms)}
.js .tip.is-in::before{transform:scaleX(1)}
.tip:last-child{border-bottom:1px solid var(--line)}
.tip__num{font-family:var(--serif);font-style:italic;font-weight:330;font-size:2.4rem;line-height:.9;color:var(--link);font-variation-settings:"opsz" 144}
.tip__cat{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.8rem;font-weight:600;color:var(--ink-2)}
.tip h3{margin-top:14px;font-family:var(--serif);font-weight:440;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);line-height:1.15;letter-spacing:-.018em;font-variation-settings:"opsz" 72;text-wrap:balance}
.tip p{margin-top:10px;color:var(--ink-2);max-width:56ch}
.tip__go{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);margin-top:4px;
  transition:transform .6s var(--ease),background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.tip:hover .tip__go{background:var(--accent);color:#fff;box-shadow:none;transform:translate(3px,-3px)}

/* ==========================================================================
   5. Išskirtinis maršrutas (fonas pereina į naktį)
   ========================================================================== */
.route__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.route .bezel__core{aspect-ratio:4/5}
.route figcaption{display:flex;align-items:center;gap:8px;margin:14px 8px 4px;font-size:.88rem;color:var(--ink-3)}
.route figcaption .i{width:16px;height:16px}
.route__text{margin-top:22px;color:var(--ink-2);font-size:1.125rem;max-width:50ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px;padding:22px 0;border-block:1px solid var(--line)}
.facts dt{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin-top:6px;font-weight:600}
.days{margin-top:26px}
.days li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
.days li:last-child{border-bottom:0}
.days .d{font-family:var(--serif);font-style:italic;color:var(--link);font-weight:380}
.route .btn{margin-top:36px}

/* ==========================================================================
   Slinkties valdomas judesys (tik naršyklėse, kurios jį palaiko)
   ========================================================================== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* Pirmoji sekcija išeidama šiek tiek susitraukia, nuotrauka juda lėčiau, tekstas išblunka */
    .hero{view-timeline:--hero block}
    .hero__frame{animation:heroRecede linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    .hero__media{animation:heroDrift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    .hero__content{animation:heroFade linear both;animation-timeline:--hero;animation-range:exit 25% exit 90%}
    @keyframes heroRecede{to{transform:scale(.9)}}
    @keyframes heroDrift{to{translate:0 24%}}
    @keyframes heroFade{to{opacity:0;translate:0 -40px}}

    /* Paralaksas: nuotrauka rėmelyje juda lėčiau nei puslapis */
    [data-parallax]{view-timeline:--px block}
    [data-parallax] img{position:absolute;left:0;top:-9%;width:100%;height:118%;animation:drift linear both;animation-timeline:--px;animation-range:cover 0% cover 100%}
    @keyframes drift{from{translate:0 -6%}to{translate:0 6%}}
  }
}

/* ==========================================================================
   Prisitaikymas
   ========================================================================== */
@media (max-width:1100px){
  .main-nav{display:none}
  .menu-toggle{display:grid}
  .main-nav + .header-actions{margin-left:auto}
}
@media (max-width:1023px){
  .dest-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(200px,34vw,300px)}
  .dest:nth-child(n){grid-column:span 1;grid-row:span 1}
  .dest:nth-child(1),.dest:nth-child(6){grid-column:span 2}
  .stories{grid-template-columns:1fr}
  .tips__grid{grid-template-columns:1fr}
  .tips__intro{position:static}
  .route__grid{grid-template-columns:1fr}
  .route .bezel__core{aspect-ratio:16/11}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter__grid{grid-template-columns:1fr;align-items:start}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:767px){
  :root{--frame:8px;--r-lg:22px;--r-md:16px}
  body{font-size:1rem}
  .site-header{top:calc(var(--frame) + 8px);padding:0 calc(var(--frame) + 8px)}
  .island{height:60px;padding:0 8px 0 14px;gap:12px}
  .logo .mark{width:32px;height:32px}
  .wordmark{font-size:1.08rem}
  .search-panel{top:calc(var(--frame) + 76px);padding:0 calc(var(--frame) + 8px)}
  .search-card{padding:16px}
  .search-card .btn{padding-left:18px}
  .hero__content{grid-template-columns:1fr;padding-top:120px;padding-inline:calc(var(--gutter) + 4px)}
  .hero__img{object-position:68% 58%}
  .hero__caption{justify-self:start}
  .hero__actions{flex-direction:column;align-items:flex-start}
  .hero__actions .btn{width:100%;justify-content:space-between}
  .rule__aside{display:none}
  .dest-grid{grid-template-rows:clamp(260px,72vw,340px);grid-auto-rows:clamp(180px,48vw,240px)}
  .dest__go{width:40px;height:40px}
  .dest:not(:nth-child(1)):not(:nth-child(6)) .dest__go{display:none}
  .dest__meta{font-size:.82rem}
  .side-story{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px 0}
  .side-story h3{font-size:1.15rem}
  .tip{grid-template-columns:minmax(0,1fr) 44px;padding:28px 0}
  .tip__num{grid-column:1 / -1;font-size:1.9rem}
  .tip__go{width:44px;height:44px;grid-column:2;grid-row:2}
  .facts{grid-template-columns:1fr;gap:14px}
  .facts div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
  .facts dd{margin:0;text-align:right}
  .posts{grid-template-columns:1fr}
  .newsletter__card{padding-inline:4px}
  .newsletter .field-shell{flex-wrap:wrap;border-radius:24px;padding:6px}
  .newsletter .field-shell input{flex-basis:100%;min-height:52px}
  .newsletter .field-shell .btn{width:100%;justify-content:space-between}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > :last-child{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js [data-reveal]{opacity:1!important;translate:none!important;clip-path:none!important}
  .js [data-reveal] img,.js .mask > span,.js .dest .dest__body{scale:1!important;translate:none!important;opacity:1!important}
  .js [data-reveal="rule"]::before,.js .tip::before{transform:none!important}
  .js [data-reveal="rule"] > *{opacity:1!important;translate:none!important}
  .mobile-menu li a{transform:none;opacity:1}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
