/* Zala Springs MAIN — News archive
 * Design reference: MAIN design system + home resort-story + package archive hero.
 */

.zs-news-archive,
.zs-news-archive *,
.zs-news-archive *::before,
.zs-news-archive *::after{
  box-sizing:border-box;
}

.zs-news-archive{
  --zsna-gold:var(--zs-brand-gold,#c2a22f);
  --zsna-dark:var(--zs-brand-midnight,#26352c);
  --zsna-forest:var(--zs-brand-forest,#394a40);
  --zsna-ivory:#fbfaf6;
  --zsna-cream:#f4f0e7;
  --zsna-muted:#707974;
  --zsna-line:rgba(38,53,44,.12);
  width:100%;
  overflow:hidden;
  background:var(--zsna-ivory);
  color:var(--zsna-dark);
  font-family:"Brandon book",Arial,Helvetica,sans-serif!important;
}

.zs-news-archive *{
  font-family:"Brandon book",Arial,Helvetica,sans-serif!important;
}

.zs-news-archive a{
  text-decoration:none;
}

/* HERO */
.zsna__hero{
  width:100%;
  padding:28px;
  background:var(--zsna-ivory);
}

.zsna__hero-frame{
  position:relative;
  min-height:clamp(430px,52vh,610px);
  overflow:hidden;
  border-radius:28px;
  background:var(--zsna-dark);
  isolation:isolate;
}

.zsna__hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
}

.zsna__hero-media img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transform:scale(1.025);
}

.zsna__hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(18,37,26,.88) 0%,rgba(18,37,26,.66) 38%,rgba(18,37,26,.25) 72%,rgba(18,37,26,.08) 100%),
    linear-gradient(0deg,rgba(13,29,20,.52),rgba(13,29,20,.05) 55%);
}

.zsna__hero-topline{
  position:absolute;
  top:72px;
  left:clamp(38px,5vw,82px);
  display:flex;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,.58);
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.zsna__hero-topline i{
  width:42px;
  height:1px;
  background:var(--zsna-gold);
}

.zsna__hero-copy{
  position:absolute;
  left:clamp(46px,7vw,128px);
  right:clamp(40px,6vw,100px);
  bottom:clamp(72px,9vh,105px);
}

.zsna__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:17px;
  color:#e2ce79;
  font-size:clamp(9px,.68vw,12px);
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.zsna__eyebrow span{
  width:36px;
  height:1px;
  background:var(--zsna-gold);
}

.zsna__eyebrow b{
  font-weight:700;
}

.zsna__hero-copy h1{
  margin:0;
  color:#fff;
  font-size:clamp(66px,6.4vw,112px);
  font-weight:400;
  line-height:.98;
  letter-spacing:.004em;
}

.zsna__hero-signature{
  position:absolute;
  right:clamp(30px,4vw,60px);
  bottom:28px;
  color:rgba(255,255,255,.32);
  font-size:8px;
  font-weight:600;
  letter-spacing:.23em;
}

/* LIST */
.zsna__body{
  width:100%;
  padding:clamp(64px,6vw,104px) clamp(18px,5vw,82px) clamp(84px,8vw,140px);
  background:var(--zsna-ivory);
}

.zsna__list{
  width:min(100%,1480px);
  margin:0 auto;
  border-top:1px solid var(--zsna-line);
}

.zsna__item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  align-items:center;
  gap:clamp(48px,6vw,108px);
  min-height:520px;
  padding:clamp(62px,6vw,100px) 0;
  border-bottom:1px solid var(--zsna-line);
}

.zsna__item--reverse .zsna__media{
  order:2;
}

.zsna__item--reverse .zsna__copy{
  order:1;
}

.zsna__media{
  position:relative;
  min-width:0;
  margin:0;
}

.zsna__image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1.34/1;
  min-height:390px;
  overflow:hidden;
  border-radius:24px;
  background:var(--zsna-cream);
  box-shadow:0 24px 65px rgba(38,53,44,.09);
}

.zsna__image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(22,39,29,.22));
  pointer-events:none;
}

.zsna__image-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.16,.74,.2,1);
}

.zsna__image-index{
  position:absolute;
  right:-8px;
  bottom:-34px;
  color:rgba(38,53,44,.055);
  font-size:clamp(96px,8vw,148px);
  font-weight:400;
  line-height:.8;
  letter-spacing:-.04em;
  pointer-events:none;
}

.zsna__copy{
  position:relative;
  min-width:0;
  padding:clamp(12px,2vw,30px) 0;
}

.zsna__item-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:20px;
  color:#9a812c;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.zsna__item-kicker i{
  width:38px;
  height:1px;
  background:var(--zsna-gold);
}

.zsna__item-kicker b{
  font-weight:700;
}

.zsna__copy h2{
  max-width:720px;
  margin:0;
  color:var(--zsna-dark);
  font-size:clamp(42px,4vw,72px);
  font-weight:400;
  line-height:1.03;
  letter-spacing:.004em;
}

.zsna__content{
  max-width:690px;
  margin-top:26px;
  color:var(--zsna-muted);
  font-size:clamp(16px,1vw,19px);
  line-height:1.68;
}

.zsna__content > *:first-child{
  margin-top:0;
}

.zsna__content > *:last-child{
  margin-bottom:0;
}

.zsna__content p{
  margin:0 0 1.05em;
}

.zsna__content h2,
.zsna__content h3,
.zsna__content h4{
  margin:1.35em 0 .55em;
  color:var(--zsna-dark);
  font-weight:400;
  line-height:1.15;
}

.zsna__content h2{font-size:1.55em}
.zsna__content h3{font-size:1.32em}
.zsna__content h4{font-size:1.15em}

.zsna__content ul,
.zsna__content ol{
  margin:1em 0;
  padding-left:1.2em;
}

.zsna__content a{
  color:var(--zsna-forest);
  text-decoration:underline;
  text-decoration-color:rgba(194,162,47,.65);
  text-underline-offset:3px;
}

.zsna__cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-width:205px;
  min-height:56px;
  margin-top:31px;
  padding:0 23px;
  border-radius:999px;
  background:var(--zsna-dark);
  color:#fff!important;
  font-size:14px;
  font-weight:600;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}

.zsna__cta i{
  font-style:normal;
  transition:transform .3s ease;
}

.zsna__item--text-only{
  display:block;
  min-height:0;
  padding:clamp(64px,6vw,98px) clamp(0px,5vw,78px);
}

.zsna__item--text-only .zsna__copy{
  width:100%;
  max-width:1120px;
  padding:0;
}

.zsna__item--text-only .zsna__copy h2,
.zsna__item--text-only .zsna__content{
  max-width:none;
}

.zsna__empty{
  width:min(100%,1480px);
  margin:0 auto;
  padding:60px 0;
  color:var(--zsna-muted);
  font-size:18px;
  text-align:center;
}

@media (hover:hover){
  .zsna__item:hover .zsna__image-wrap img{
    transform:scale(1.035);
  }

  .zsna__cta:hover{
    transform:translateY(-3px);
    background:var(--zsna-forest);
    box-shadow:0 15px 34px rgba(38,53,44,.18);
  }

  .zsna__cta:hover i{
    transform:translateX(5px);
  }
}

@media (max-width:1366px){
  .zsna__hero{padding:22px}
  .zsna__hero-frame{border-radius:28px}
  .zsna__item{
    min-height:470px;
    grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
    gap:64px;
  }
  .zsna__image-wrap{min-height:350px}
}

@media (max-width:1200px){
  .zsna__hero{padding:18px}
  .zsna__hero-frame{min-height:430px;border-radius:24px}
  .zsna__hero-topline{top:64px;left:42px}
  .zsna__hero-copy{left:54px;bottom:74px}
  .zsna__item{
    grid-template-columns:minmax(0,1.02fr) minmax(330px,.98fr);
    gap:46px;
    min-height:430px;
  }
  .zsna__image-wrap{min-height:320px;border-radius:21px}
}

@media (max-width:1024px){
  .zsna__hero{padding:16px}
  .zsna__hero-frame{min-height:410px;border-radius:22px}
  .zsna__hero-copy h1{font-size:clamp(58px,7vw,78px)}
  .zsna__item{
    grid-template-columns:minmax(0,1fr) minmax(310px,.92fr);
    gap:36px;
    padding:62px 0;
  }
  .zsna__image-wrap{min-height:290px;border-radius:19px}
  .zsna__copy h2{font-size:clamp(38px,4.8vw,58px)}
}

@media (max-width:880px){
  .zsna__hero{padding:12px}
  .zsna__hero-frame{min-height:430px;border-radius:19px}
  .zsna__hero-topline{top:58px;left:30px}
  .zsna__hero-copy{
    right:30px;
    bottom:66px;
    left:30px;
  }
  .zsna__hero-copy h1{font-size:clamp(54px,9vw,72px)}
  .zsna__hero-signature{right:28px;bottom:22px}

  .zsna__body{padding:64px 22px 96px}
  .zsna__item,
  .zsna__item--reverse{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-height:0;
    padding:58px 0;
  }
  .zsna__item .zsna__media,
  .zsna__item--reverse .zsna__media{
    order:1;
    width:100%;
  }
  .zsna__item .zsna__copy,
  .zsna__item--reverse .zsna__copy{
    order:2;
    width:100%;
    max-width:none;
    padding:42px 6px 0;
  }
  .zsna__image-wrap{
    min-height:0;
    aspect-ratio:1.48/1;
  }
  .zsna__image-index{
    right:6px;
    bottom:-27px;
    font-size:104px;
  }
  .zsna__item--text-only{
    display:block;
    padding:64px 6px;
  }
  .zsna__item--text-only .zsna__copy{
    padding:0;
  }
}

@media (max-width:767px){
  .zsna__hero{padding:10px}
  .zsna__hero-frame{
    min-height:430px;
    border-radius:17px;
  }
  .zsna__hero-media img{object-position:58% center}
  .zsna__hero-overlay{
    background:
      linear-gradient(0deg,rgba(14,31,22,.91) 0%,rgba(14,31,22,.72) 44%,rgba(14,31,22,.22) 100%),
      linear-gradient(90deg,rgba(14,31,22,.24),transparent);
  }
  .zsna__hero-topline{
    top:54px;
    left:clamp(18px,5vw,26px);
    gap:9px;
    font-size:8px;
    letter-spacing:.18em;
  }
  .zsna__hero-topline i{width:26px}
  .zsna__hero-topline span:last-child{display:none}
  .zsna__hero-copy{
    right:clamp(18px,5vw,28px);
    bottom:58px;
    left:clamp(18px,5vw,28px);
  }
  .zsna__eyebrow{
    gap:8px;
    margin-bottom:12px;
    font-size:8px;
    letter-spacing:.16em;
  }
  .zsna__eyebrow span{width:26px}
  .zsna__hero-copy h1{
    font-size:clamp(46px,13vw,64px);
    line-height:1;
  }
  .zsna__hero-signature{display:none}

  .zsna__body{padding:52px 18px 82px}
  .zsna__item,
  .zsna__item--reverse{
    padding:50px 0;
  }
  .zsna__image-wrap{
    aspect-ratio:1.28/1;
    border-radius:17px;
  }
  .zsna__item .zsna__copy,
  .zsna__item--reverse .zsna__copy{
    padding:38px 2px 0;
  }
  .zsna__item-kicker{margin-bottom:16px}
  .zsna__copy h2{
    font-size:clamp(40px,11vw,56px);
    line-height:1.03;
  }
  .zsna__content{
    margin-top:21px;
    font-size:16px;
    line-height:1.62;
  }
  .zsna__cta{
    width:100%;
    margin-top:27px;
  }
  .zsna__item--text-only{
    padding:54px 2px;
  }
}

@media (prefers-reduced-motion:reduce){
  .zs-news-archive *,
  .zs-news-archive *::before,
  .zs-news-archive *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}