/* Atlantic Road Seaside Housing — homepage
   Loads after css/main.css (tokens, base, header, footer). */
img{max-width:100%;display:block}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:calc(100svh - 6rem);
  min-height:640px;
  display:flex;
  align-items:flex-end;
  color:var(--mist);
}
.hero--flush{padding:0} /* undoes the generic `section` padding below — hero handles its own spacing via .hero-content */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(19,43,58,.35) 0%, rgba(19,43,58,0) 40%, rgba(19,43,58,.65) 100%);
}
.hero-content{
  position:relative;
  width:100%;
  padding-bottom:9rem;
  text-align:center;
}
.hero-content .eyebrow{color:var(--linen);text-shadow:0 1px 14px rgba(19,43,58,.6)}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  font-weight:500;
  max-width:16ch;
  margin:0 auto;
  text-shadow:0 2px 20px rgba(19,43,58,.45);
}
.hero h1 em{font-style:italic;color:var(--linen)}
/* ---------- Booking bar ---------- */
.booking-bar{
  position:relative;
  z-index:5;
  max-width:820px;
  margin:-4.4rem auto 0;
  background:var(--mist);
  box-shadow:0 24px 60px rgba(19,43,58,.18);
  display:grid;
  grid-template-columns:1.1fr .7fr auto;
}
.booking-field{
  padding:1.5rem 1.8rem;
  border-right:1px solid rgba(19,43,58,.1);
}
.booking-field label,
.booking-field .booking-field-label{
  display:block;
  font-family:var(--accent);
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);
  margin-bottom:.45rem;
}
.booking-field select,
.booking-field input{
  width:100%;
  border:none;background:none;
  font-family:var(--body);
  font-size:.95rem;
  color:var(--fjord);
  padding:0;
}
.booking-field select:focus,.booking-field input:focus{outline:none}
@media (max-width:820px){
  .hero{height:calc(100svh - 11rem)}
  .booking-bar{grid-template-columns:1fr 1fr;margin:-3rem 20px 0}
  .booking-field:nth-child(2n){border-right:none}
  .booking-bar .dr-pop{left:0}
  .booking-field{border-bottom:1px solid rgba(19,43,58,.1)}
  .search-submit{grid-column:1/-1;padding:1.2rem}
}

/* ---------- Sections ---------- */
section{padding:clamp(5rem,10vw,9rem) 0}
.section-head{max-width:640px;margin-bottom:4rem}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.2rem}
.section-head p{color:var(--slate)}

/* Manifesto */
.manifesto{text-align:center;background:var(--mist)}
.manifesto h2{
  font-size:clamp(1.9rem,3.8vw,3rem);
  max-width:22ch;
  margin:0 auto 2rem;
}
.manifesto h2 em{font-style:italic;color:var(--petrol)}
.manifesto p{
  max-width:62ch;
  margin:0 auto 1.4rem;
  color:var(--slate);
  font-size:1.02rem;
}
.manifesto .rule{
  width:56px;height:1px;background:var(--brass);
  margin:2.6rem auto 0;
}

/* Homes */
.homes{background:var(--linen)}
.homes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.2rem;
}
.home-card{background:transparent;display:flex;flex-direction:column}
.home-card .img-slot{aspect-ratio:4/5;transition:transform .5s var(--ease)}
.home-card figure{overflow:hidden}
.home-card:hover .img-slot{transform:scale(1.035)}
.home-card h3{
  font-size:1.45rem;
  margin:1.4rem 0 .4rem;
}
.home-meta{
  font-family:var(--accent);
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-ink);
  margin-bottom:.7rem;
}
.home-card p{font-size:.92rem;color:var(--slate);margin-bottom:1rem;flex:1}
.home-link{
  font-family:var(--accent);
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fjord);
  border-bottom:1px solid var(--brass);
  align-self:flex-start;
  padding-bottom:.3em;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.home-link:hover{color:var(--petrol);border-color:var(--petrol)}
@media (max-width:1024px){.homes-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.homes-grid{grid-template-columns:1fr}}

/* Experiences */
.experiences{background:var(--fjord);color:var(--linen)}
.experiences .section-head p{color:rgba(237,231,220,.7)}
/* On dark backgrounds the lighter brass has better contrast than brass-ink */
.experiences .eyebrow{color:var(--brass)}
.exp-layout{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:stretch;
}
.exp-tabs{display:flex;flex-direction:column;justify-content:center}
.exp-tab{
  background:none;border:none;
  text-align:left;
  color:rgba(237,231,220,.45);
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  padding:.55em 0;
  cursor:pointer;
  border-bottom:1px solid rgba(237,231,220,.12);
  transition:color .35s,padding-left .35s var(--ease);
}
.exp-tab[aria-selected="true"]{color:var(--linen);padding-left:.6em;border-color:var(--brass)}
.exp-tab:hover{color:var(--linen)}
/* All panels share one grid cell, so the wrapper is as tall as the tallest
   panel — no hardcoded min-height to clip longer copy on small screens. */
.exp-panel-wrap{position:relative;display:grid}
.exp-panel{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
  display:flex;flex-direction:column;
}
.exp-panel.active{opacity:1;visibility:visible}
.exp-panel .img-slot{flex:1;min-height:340px}
.exp-panel p{
  margin-top:1.6rem;
  color:rgba(237,231,220,.78);
  font-size:.98rem;
  max-width:56ch;
}
@media (max-width:820px){
  .exp-layout{grid-template-columns:1fr}
}

/* Seasons strip */
.seasons{background:var(--mist);text-align:center}
.seasons h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:1.6rem}
.seasons-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
  margin:3.5rem 0;
}
.seasons-strip .img-slot{aspect-ratio:9/16}
.seasons-strip .img-slot:nth-child(even){transform:translateY(2.2rem)}
.seasons p.lede{max-width:60ch;margin:0 auto 2.4rem;color:var(--slate)}
@media (max-width:820px){
  .seasons-strip{grid-template-columns:1fr 1fr}
  /* The stagger only reads as rhythm across four columns; at two it turns the
     whole right-hand column into a crooked step with dead space below. */
  .seasons-strip .img-slot:nth-child(even){transform:none}
}

/* Reviews */
.reviews{background:var(--linen)}
.reviews-layout{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.score-big{
  font-family:var(--display);
  font-size:clamp(5rem,10vw,8rem);
  line-height:1;
  color:var(--petrol);
}
.score-big span{font-size:.35em;color:var(--slate)}
.score-caption{
  font-family:var(--accent);
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);
  margin-top:.8rem;
}
.score-sub{color:var(--slate);font-size:.92rem;margin-top:.4rem}
.score-rows{display:flex;flex-direction:column;gap:1.15rem}
.score-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:1.2rem}
.score-row .name{font-family:var(--accent);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fjord)}
.score-track{height:1px;background:rgba(19,43,58,.15);position:relative}
.score-fill{
  position:absolute;top:-1px;left:0;height:3px;
  background:var(--brass);
  width:0;
  transition:width 1.2s var(--ease);
}
.score-row .val{font-family:var(--display);font-size:1.05rem;text-align:right;color:var(--petrol)}
@media (max-width:820px){
  .reviews-layout{grid-template-columns:1fr}
  .score-row{grid-template-columns:110px 1fr 40px}
}

/* Location */
.location{background:var(--mist)}
.location h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.loc-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.loc-layout .img-slot{aspect-ratio:4/3}
/* Marker + popup skin lives in css/main.css (shared with #expMap) */
#locMap{aspect-ratio:4/3;min-height:280px;background:var(--mist);border:1px solid rgba(19,43,58,.15)}
.loc-list{list-style:none;margin-top:2.4rem}
.loc-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem 0;
  border-bottom:1px solid rgba(19,43,58,.12);
  font-size:.95rem;
}
.loc-list .dist{font-family:var(--display);color:var(--petrol);white-space:nowrap;margin-left:2rem}
.loc-address{
  margin-top:2rem;
  font-family:var(--accent);
  font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-ink);
  line-height:2;
}
.loc-address a:hover{color:var(--fjord)}
@media (max-width:820px){.loc-layout{grid-template-columns:1fr}}

/* Practical / amenities + rules */
.practical{background:var(--petrol);color:var(--linen)}
.practical .section-head h2{color:var(--linen)}
.practical .section-head p{color:rgba(237,231,220,.72)}
.practical-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem);
}
.practical-col h3{
  font-size:1.25rem;
  margin-bottom:1.4rem;
  color:var(--linen);
}
.practical-col ul{list-style:none}
.practical-col li{
  padding:.55rem 0;
  border-bottom:1px solid rgba(237,231,220,.14);
  font-size:.92rem;
  color:rgba(237,231,220,.85);
}
.practical-col li strong{font-weight:500;color:var(--linen)}
@media (max-width:820px){.practical-grid{grid-template-columns:1fr}}

/* ---- Guest quotes carousel ---- */
.quotes{
  background:var(--sand);
  padding:clamp(5rem,10vw,9rem) 0;
  overflow:hidden;
}
.quotes .quotes-head{text-align:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.quotes .quotes-head h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);
  color:var(--fjord);
  margin:.9rem auto 0;
  max-width:22ch;
  line-height:1.15;
}
.quotes .quotes-head h2 em{font-style:italic;color:var(--brass-ink)}

.quote-stage{
  position:relative;
  max-width:56rem;
  margin:0 auto;
  text-align:center;
  min-height:16rem;
}
.quote-mark{
  font-family:var(--display);
  font-size:clamp(4rem,8vw,6rem);
  line-height:.5;
  color:var(--brass);
  display:block;
  margin-bottom:1.6rem;
  user-select:none;
}
.quote-slide{
  position:absolute;
  inset:0;
  top:clamp(3.2rem,6vw,4.6rem);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s ease, transform .7s ease;
  pointer-events:none;
}
.quote-slide.is-active{
  position:relative;
  inset:auto;
  top:auto;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.quote-slide blockquote{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  line-height:1.55;
  color:var(--fjord);
}
.quote-slide figcaption{
  margin-top:1.8rem;
  font-family:var(--accent);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fjord);
  opacity:.65;
}
.quote-slide figcaption .score{
  color:var(--brass-ink);
  opacity:1;
}

.quote-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin-top:clamp(2rem,5vw,3rem);
}
.quote-arrow{
  appearance:none;
  background:none;
  border:1px solid rgba(19,43,58,.28);
  color:var(--fjord);
  width:2.7rem;height:2.7rem;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  display:grid;place-items:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.quote-arrow:hover{
  background:var(--fjord);
  border-color:var(--fjord);
  color:var(--sand);
}
.quote-dots{display:flex;gap:.55rem}
.quote-dots button{
  appearance:none;border:none;cursor:pointer;
  width:.5rem;height:.5rem;border-radius:50%;
  background:rgba(19,43,58,.25);
  padding:0;
  transition:background .3s ease, transform .3s ease;
}
.quote-dots button.is-active{
  background:var(--brass);
  transform:scale(1.35);
}
@media (prefers-reduced-motion:reduce){
  .quote-slide{transition:none}
}

/* --bp-short (max-height:700px) — landscape phones. Must stay LAST in this
   file so it beats the width queries above; see the note in css/main.css. */
@media (max-height:700px){
  /* 7rem ≈ how far the booking bar overhangs the hero, so the whole bar stays
     above the fold on a landscape phone instead of being pushed under it. */
  .hero{height:calc(100svh - 7rem);min-height:0}
  .hero-content{padding-bottom:4rem}
  /* The display size is tuned for a tall viewport; at 390px the two lines
     plus the eyebrow would run up into the fixed header. */
  .hero h1{font-size:clamp(1.8rem,4.4vw,2.6rem)}
  .hero-content .eyebrow{margin-bottom:.8rem}
}