/* =========================================================
   Lostinnusa — main stylesheet
   Black + warm light brown, text-forward, minimal imagery.
   ========================================================= */

:root{
  --black-primary:#0d0d0d;
  --black-secondary:#1c1410;
  --brown-primary:#c9a87a;
  --brown-secondary:#b08c5f;
  --brown-light:#f1e6d2;
  --cream:#faf5ed;
  --text-dark:#1f1812;
  --text-muted:#6b5d4f;
  --radius:6px;
  --radius-lg:10px;
}

html,body{background:var(--black-primary);color:var(--cream)}
body{font-family:'Inter','Poppins',system-ui,-apple-system,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}

/* ==============================
   HERO
   ============================== */
.hero-section{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:6rem 1.5rem 4rem;
  background:linear-gradient(180deg, var(--black-primary) 0%, var(--black-secondary) 100%);
  position:relative;
  border-bottom:1px solid rgba(201,168,122,.2);
}
.hero-inner{max-width:780px;text-align:center}
.hero-eyebrow{
  color:var(--brown-primary);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  margin-bottom:1.5rem;
  font-weight:500;
}
.hero-brand{
  color:var(--cream);
  font-size:clamp(2.75rem, 8vw, 5.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:1.5rem;
}
.hero-description{
  color:var(--brown-light);
  font-size:clamp(1rem, 2.2vw, 1.25rem);
  max-width:560px;
  margin:0 auto 2.5rem;
  line-height:1.6;
}
.hero-ctas{
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==============================
   BUTTONS
   ============================== */
.btn-primary,.btn-outline,.btn-ghost,.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:600;
  padding:.75rem 1.5rem;border-radius:var(--radius);
  transition:all .2s ease;
  cursor:pointer;
}
.btn-primary{background:var(--brown-primary);color:var(--black-primary)}
.btn-primary:hover{background:var(--brown-secondary)}
.btn-outline{background:transparent;color:var(--brown-primary);border:1px solid var(--brown-primary)}
.btn-outline:hover{background:var(--brown-primary);color:var(--black-primary)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(250,245,237,.25)}
.btn-ghost:hover{background:rgba(250,245,237,.08);border-color:var(--cream)}
.btn-link{
  color:var(--brown-primary);
  font-weight:600;
  padding:0;
  margin-top:1rem;
  align-self:flex-start;
  font-size:.9rem;
}
.btn-link:hover{color:var(--brown-secondary);text-decoration:underline}

/* ==============================
   SECTIONS
   ============================== */
.section{padding:5rem 1.5rem;scroll-margin-top:80px}
.section-dark{background:var(--black-primary);color:var(--cream)}
.section-light{background:var(--brown-light);color:var(--text-dark)}
.section-inner{max-width:1100px;margin:0 auto}
.section-head{text-align:center;margin-bottom:3rem;max-width:680px;margin-left:auto;margin-right:auto}
.section-title{
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:.75rem;
}
.section-dark .section-title{color:var(--brown-primary)}
.section-light .section-title{color:var(--text-dark)}
.section-subtitle{
  font-size:1rem;
  line-height:1.6;
}
.section-dark .section-subtitle{color:rgba(250,245,237,.7)}
.section-light .section-subtitle{color:var(--text-muted)}

/* ==============================
   CARD GRIDS
   ============================== */
.card-grid{display:grid;gap:1.25rem}
/* Let cards size to their own content instead of stretching to equal height */
#island .card-grid,#snorkeling .card-grid{align-items:start}
.card-grid-2{grid-template-columns:1fr}
.card-grid-3{grid-template-columns:1fr}
@media(min-width:640px){
  .card-grid-2{grid-template-columns:repeat(2,1fr)}
  .card-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .card-grid-3{grid-template-columns:repeat(3,1fr)}
}

.card-title{
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--brown-primary);
  margin-bottom:.85rem;
}
.section-light .card-title{color:var(--text-dark)}
.card-note{
  font-size:.95rem;
  line-height:1.55;
  color:rgba(250,245,237,.75);
}
.section-light .card-note{color:var(--text-muted)}
.card-meta-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--brown-secondary);
  margin:.75rem 0 .5rem;
  font-weight:600;
}

/* ==============================
   DRIVER CARD
   ============================== */
.driver-card{
  background:var(--black-secondary);
  border:1px solid rgba(201,168,122,.15);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.driver-card:hover{border-color:var(--brown-primary);transform:translateY(-2px)}
.driver-card .meta{margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.driver-card .meta>div{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.driver-card .meta dt{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--brown-secondary);
  font-weight:600;
  min-width:90px;
}
.driver-card .meta dd{color:var(--cream);font-size:.95rem;display:flex;gap:.4rem;flex-wrap:wrap}
.chip{
  display:inline-block;
  background:rgba(201,168,122,.15);
  color:var(--brown-primary);
  border:1px solid rgba(201,168,122,.3);
  padding:.15rem .55rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:500;
}

/* ==============================
   TOUR CARD
   ============================== */
.tour-card{
  --tour-pad:1.75rem;
  background:var(--cream);
  border:1px solid rgba(176,140,95,.2);
  border-radius:var(--radius-lg);
  padding:var(--tour-pad);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
/* Full-bleed image at the top of a tour card */
.tour-card-image{
  position:relative;
  margin:calc(var(--tour-pad) * -1) -3rem 1.25rem calc(var(--tour-pad) * -1);
  aspect-ratio:16/10;
  overflow:hidden;
  background:rgba(176,140,95,.12);
}
.tour-card-image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Carousel: crossfade stacked images + nav */
.tour-carousel img{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .45s ease;
}
.tour-carousel img.is-active{opacity:1}
.carousel-nav{
  position:absolute;top:50%;
  width:2rem;height:2rem;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;
  background:rgba(31,24,18,.45);
  color:#fff;
  cursor:pointer;
  transition:background .2s;
  z-index:2;
}
.carousel-nav:hover{background:rgba(31,24,18,.7)}
.carousel-prev{left:.6rem}
.carousel-next{right:.6rem}
.carousel-nav::before{
  content:"";
  width:.55rem;height:.55rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
.carousel-prev::before{transform:translateX(2px) rotate(135deg)}
.carousel-next::before{transform:translateX(-2px) rotate(-45deg)}
.carousel-dots{
  position:absolute;left:0;right:0;bottom:.6rem;
  display:flex;justify-content:center;gap:.4rem;
  z-index:2;
}
.carousel-dot{
  width:.5rem;height:.5rem;
  padding:0;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.carousel-dot.is-active{background:#fff;transform:scale(1.25)}
/* Lift the check indicator off the photo so it stays visible */
.tour-card-has-image .select-check{box-shadow:0 1px 4px rgba(31,24,18,.35)}
.tour-card:hover{border-color:var(--brown-secondary);transform:translateY(-2px);box-shadow:0 6px 20px rgba(31,24,18,.08)}
.tour-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  margin-bottom:.5rem;
  border-bottom:1px solid rgba(176,140,95,.15);
  padding-bottom:.85rem;
}
.tour-head .card-title{margin-bottom:0;flex:1}
.tour-price{
  font-size:1.15rem;
  font-weight:700;
  color:var(--brown-secondary);
  white-space:nowrap;
}
.tour-duration{
  font-size:.85rem;
  color:var(--text-muted);
  margin:.75rem 0;
}
.tour-duration-label{font-weight:600}
.dest-list{
  list-style:none;
  padding:0;
  margin:0 0 .5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.dest-list li{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.95rem;
  color:var(--text-dark);
}
.dest-list .arrow{
  color:var(--brown-secondary);
  font-weight:700;
  flex-shrink:0;
}
.tour-card .btn-link{color:var(--brown-secondary)}
.tour-card .btn-link:hover{color:var(--text-dark)}

/* Spots / itinerary accordion */
.dest-accordion{margin:.25rem 0 0}
.dest-summary{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;
  list-style:none;
  padding:.6rem 0;
  border-top:1px solid rgba(176,140,95,.15);
}
/* Avoid a double divider when an accordion sits right under the card head */
.tour-head + .dest-accordion > .dest-summary{border-top:none}
.dest-summary::-webkit-details-marker{display:none}
.dest-summary:hover .card-meta-label{color:var(--text-dark)}
.dest-summary .card-meta-label{margin:0;transition:color .2s}
.dest-count{color:var(--text-muted);font-weight:500;letter-spacing:0}
.dest-chevron{
  width:.5rem;height:.5rem;
  border-right:2px solid var(--brown-secondary);
  border-bottom:2px solid var(--brown-secondary);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s;
  flex-shrink:0;
}
.dest-accordion[open] .dest-chevron{transform:translateY(1px) rotate(-135deg)}
.dest-accordion[open] .dest-list{margin-top:.6rem}
.desc-text{
  margin:0;
  font-size:.95rem;
  line-height:1.6;
  color:var(--text-dark);
}
.dest-accordion[open] .desc-text{margin-top:.6rem}

/* Island trip meta tags */
.trip-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 .9rem}
.trip-tag{
  display:inline-block;
  background:rgba(176,140,95,.12);
  color:var(--brown-secondary);
  border:1px solid rgba(176,140,95,.25);
  padding:.2rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
}
.tour-price-unit{font-size:.8rem;font-weight:500;color:var(--text-muted)}

/* ==============================
   SNORKELING GROUPS
   ============================== */
.snorkel-group{margin-bottom:3rem}
.snorkel-group:last-child{margin-bottom:0}
.snorkel-group-head{margin-bottom:1.25rem}
.snorkel-group-title{
  font-size:1.4rem;
  font-weight:700;
  color:var(--text-dark);
  display:inline-flex;align-items:center;gap:.65rem;
  margin:0;
}
.snorkel-group-title::before{
  content:"";
  width:1.75rem;height:2px;
  background:var(--brown-secondary);
  display:inline-block;flex-shrink:0;
}
.snorkel-group-note{font-size:.9rem;color:var(--text-muted);margin-top:.4rem}
.snorkel-notes{
  margin-top:1.25rem;
  background:rgba(176,140,95,.08);
  border:1px solid rgba(176,140,95,.2);
  border-radius:var(--radius-lg);
  padding:1.1rem 1.35rem;
}
.snorkel-notes .card-meta-label{margin-top:0}
.snorkel-note-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.snorkel-note-list li{
  position:relative;
  padding-left:1.1rem;
  font-size:.9rem;
  color:var(--text-dark);
  line-height:1.5;
}
.snorkel-note-list li::before{
  content:"•";
  position:absolute;left:0;
  color:var(--brown-secondary);
  font-weight:700;
}
.snorkel-notes-footer{
  margin:.85rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--text-muted);
}
/* Included list — checkmarks, two columns on wider screens */
.snorkel-include-list{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr;gap:.5rem .75rem;
}
@media(min-width:560px){
  .snorkel-include-list{grid-template-columns:1fr 1fr}
}
.snorkel-include-list li{
  position:relative;
  padding-left:1.5rem;
  font-size:.9rem;
  color:var(--text-dark);
  line-height:1.5;
}
.snorkel-include-list li::before{
  content:"";
  position:absolute;left:.1rem;top:.18rem;
  width:.4rem;height:.7rem;
  border-right:2px solid var(--brown-secondary);
  border-bottom:2px solid var(--brown-secondary);
  transform:rotate(45deg);
}

/* ==============================
   VEHICLE LIST
   ============================== */
.vehicle-list{
  display:flex;flex-direction:column;
  border:1px solid rgba(201,168,122,.15);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.vehicle-row{
  display:grid;
  grid-template-columns:1fr;
  gap:.4rem;
  padding:1.25rem 1.5rem;
  background:var(--black-secondary);
  border-bottom:1px solid rgba(201,168,122,.12);
  align-items:center;
}
.vehicle-row:last-child{border-bottom:none}
.vehicle-row:hover{background:rgba(201,168,122,.05)}
.vehicle-name{
  font-size:1.1rem;
  font-weight:600;
  color:var(--cream);
}
.vehicle-capacity{font-size:.9rem;color:rgba(250,245,237,.7)}
.cap-label{color:var(--brown-secondary);font-weight:600}
.vehicle-price{
  font-size:1rem;
  font-weight:700;
  color:var(--brown-primary);
}
.vehicle-cta{
  font-size:.9rem;
  color:var(--brown-primary);
  font-weight:600;
  justify-self:start;
}
.vehicle-cta:hover{color:var(--brown-secondary);text-decoration:underline}
@media(min-width:768px){
  .vehicle-row{grid-template-columns:2fr 1.2fr 1fr auto;gap:1.5rem}
  .vehicle-cta{justify-self:end}
}

/* ==============================
   PARTNERS / VILLAS
   ============================== */
.partner-grid{
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
.partner-item{
  background:rgba(255,255,255,.5);
  border-left:3px solid var(--brown-secondary);
  padding:1.25rem 1.5rem;
  border-radius:0 var(--radius) var(--radius) 0;
  transition:background .2s,border-color .2s;
}
.partner-item:hover{background:rgba(255,255,255,.8);border-left-color:var(--text-dark)}
.partner-name{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:.4rem;
}
.partner-blurb{
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.55;
}

/* ==============================
   CONTACT
   ============================== */
.contact-grid{
  max-width:760px;
  margin:0 auto 2.5rem;
}
.contact-direct{
  background:var(--black-secondary);
  border:1px solid rgba(201,168,122,.2);
  border-radius:var(--radius-lg);
  padding:2rem;
}
.contact-list{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}
.contact-list>div{display:flex;flex-direction:column;gap:.25rem}
.contact-list dt{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--brown-secondary);
  font-weight:600;
}
.contact-list dd{color:var(--cream);font-size:1rem}
.contact-link{
  color:var(--brown-primary);
  font-weight:500;
  word-break:break-word;
}
.contact-link:hover{color:var(--brown-secondary);text-decoration:underline}
.contact-cta{width:100%;margin-top:.5rem}

/* ==============================
   RESPONSIVE TWEAKS
   ============================== */
@media(max-width:640px){
  .section{padding:3.5rem 1.25rem}
  .driver-card,.contact-direct{padding:1.5rem}
  .tour-card{--tour-pad:1.5rem}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas a{justify-content:center}
}

/* Smooth scroll for anchor links */
html{scroll-behavior:smooth}

/* =========================================================
   SELECTABLE CARDS — checkbox flow
   ========================================================= */
.select-helper{
  margin-top:1rem;
  font-size:.85rem;
  color:rgba(250,245,237,.55);
  font-style:italic;
}
.select-helper-light{color:var(--text-muted)}

.select-label{
  cursor:pointer;
  position:relative;
  user-select:none;
}
.select-input{
  position:absolute;
  opacity:0;
  width:0;height:0;
  pointer-events:none;
}
/* Visual checkmark indicator (top-right of every selectable card) */
.select-check{
  position:absolute;
  top:.85rem;right:.85rem;
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid rgba(201,168,122,.5);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s ease;
  flex-shrink:0;
  z-index:2;
}
.select-check::after{
  content:'';
  width:9px;height:5px;
  border-left:2px solid var(--black-primary);
  border-bottom:2px solid var(--black-primary);
  transform:translateY(-1px) rotate(-45deg);
  opacity:0;
  transition:opacity .15s ease;
}
.select-check-light{border-color:rgba(176,140,95,.45)}
.select-label:hover .select-check{border-color:var(--brown-primary)}
.select-input:checked ~ .select-check{
  background:var(--brown-primary);
  border-color:var(--brown-primary);
}
.select-input:checked ~ .select-check::after{opacity:1}
.select-input:focus-visible ~ .select-check{
  outline:2px solid var(--brown-primary);
  outline-offset:2px;
}

/* Selected state — apply ring + lift to whichever card is checked */
.select-input:checked ~ *{}  /* no-op anchor for specificity context */
.select-label:has(.select-input:checked){
  border-color:var(--brown-primary)!important;
  box-shadow:0 0 0 1px var(--brown-primary), 0 6px 24px rgba(201,168,122,.18);
}

/* Make space for the check indicator so it doesn't sit on top of titles */
.driver-card.select-label,
.tour-card.select-label,
.partner-item.select-label{padding-right:3rem}
.vehicle-row.select-label{padding-right:3rem;position:relative}

/* Vehicle row uses a different grid — give it room for the check */
@media(min-width:768px){
  .vehicle-row.select-label{grid-template-columns:2fr 1.2fr 1fr;gap:1.5rem;padding-right:3.5rem}
}

/* =========================================================
   SELECTION SUMMARY (contact section)
   ========================================================= */
.selection-summary{
  background:var(--black-secondary);
  border:1px solid rgba(201,168,122,.2);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.5rem;
  max-width:760px;
  margin-left:auto;margin-right:auto;
}
.summary-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1rem;gap:1rem;
}
.summary-title{
  font-size:1.05rem;
  font-weight:600;
  color:var(--brown-primary);
  margin:0;
}
.summary-clear{
  background:transparent;
  border:1px solid rgba(250,245,237,.25);
  color:var(--cream);
  font-size:.8rem;
  padding:.4rem .9rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .15s ease;
}
.summary-clear:hover{
  background:rgba(250,245,237,.08);
  border-color:var(--cream);
}
.summary-empty{
  color:rgba(250,245,237,.5);
  font-size:.95rem;
  font-style:italic;
  margin:0;
}
.summary-groups{
  display:flex;flex-direction:column;gap:.85rem;
}
.summary-group{display:flex;flex-direction:column;gap:.4rem}
.summary-group dt{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--brown-secondary);
  font-weight:600;
}
.summary-group dd{
  margin:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.summary-chip{
  background:rgba(201,168,122,.15);
  color:var(--brown-primary);
  border:1px solid rgba(201,168,122,.3);
  padding:.25rem .7rem;
  border-radius:999px;
  font-size:.85rem;
}
.summary-count{
  font-size:.85rem;
  color:rgba(250,245,237,.6);
  margin-top:.85rem;
  text-align:right;
}

/* =========================================================
   CONTACT ACTION (large WA CTA)
   ========================================================= */
.contact-actions{
  text-align:center;
  margin-bottom:2rem;
}
.btn-large{
  font-size:1rem;
  padding:1rem 2rem;
  min-width:280px;
}
@media(max-width:640px){
  .btn-large{width:100%;min-width:0}
}