/* =========================================================
   LA MARINA HOTEL — HERO VARIATIONS (comparison page)
   Uses tokens defined in tokens.css (load tokens.css first).
   Class prefix: lmv- (kept separate from the lm- production
   classes in style.css since these are draft mockups only).
   ========================================================= */

*{ box-sizing:border-box; }
.lmv-body{
  margin:0;
  background:var(--lm-bg);
  font-family:var(--lm-font-body);
  color:var(--lm-ink-soft);
}

.lmv-page{ padding:56px 24px 96px; }
.lmv-container{ max-width:1280px; margin:0 auto; }

.lmv-page-title{
  font-family:var(--lm-font-heading);
  font-weight:600;
  font-size:clamp(28px,4vw,40px);
  color:var(--lm-ink);
  margin:0 0 10px;
}
.lmv-page-subtitle{
  font-size:15px;
  line-height:1.6;
  color:var(--lm-text-muted);
  max-width:640px;
  margin:0 0 44px;
}

.lmv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:44px;
}

.lmv-variant__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.lmv-variant__label{
  font-family:var(--lm-font-heading);
  font-size:22px;
  font-weight:600;
  color:var(--lm-ink-soft);
  margin:0;
}
.lmv-badge{
  background:var(--lm-primary);
  color:var(--lm-white);
  font-size:10px;
  font-weight:700;
  padding:3px 9px;
  border-radius:var(--lm-radius-pill);
  letter-spacing:.05em;
}

.lmv-frame{
  background:var(--lm-white);
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding-bottom:28px;
  overflow:hidden;
}

.lmv-variant__caption{
  padding:18px 4px 0;
  margin:0;
  font-size:12.5px;
  color:var(--lm-text-mute-2);
  line-height:1.5;
}

.lmv-mono{
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lmv-btn{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  padding:11px 20px;
  border-radius:var(--lm-radius-pill);
}
.lmv-btn--accent{ background:var(--lm-accent); color:var(--lm-ink); }
.lmv-btn--ghost{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.5);
  color:var(--lm-white);
  font-weight:600;
}
.lmv-btn--primary{ background:var(--lm-primary); color:var(--lm-white); }
.lmv-btn--outline{
  border:1px solid rgba(var(--lm-primary-rgb), .35);
  color:var(--lm-primary);
  font-weight:600;
  background:transparent;
}

/* ===== Frame A — Full-bleed sunrise ===== */
.lmv-hero--a{
  position:relative;
  height:430px;
  display:flex;
  align-items:center;
  padding:0 44px;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(180deg, #5b96ab, #2f6175);
}
.lmv-hero--a .lmv-hero__tag{
  position:absolute; top:16px; right:18px;
  color:rgba(255,255,255,.6);
}
.lmv-hero--a .lmv-hero__brand{
  position:absolute; top:18px; left:18px;
  color:rgba(255,255,255,.85);
  font-family:var(--lm-font-heading);
  font-size:18px;
  font-weight:600;
}
.lmv-hero--a .lmv-hero__content{ color:var(--lm-white); max-width:62%; }
.lmv-hero--a .lmv-hero__eyebrow{
  color:var(--lm-accent);
  display:block;
  margin-bottom:14px;
}
.lmv-hero--a .lmv-hero__title{
  font-family:var(--lm-font-heading);
  font-weight:500;
  font-size:58px;
  line-height:.96;
  margin:0 0 14px;
}
.lmv-hero--a .lmv-hero__title-italic{ color:var(--lm-accent-soft); font-style:italic; }
.lmv-hero--a .lmv-hero__lead{
  font-size:13px;
  line-height:1.5;
  opacity:.9;
  max-width:300px;
  margin:0 0 22px;
}
.lmv-hero--a .lmv-hero__actions{ display:flex; gap:10px; }

.lmv-booking--a{
  margin:-34px 32px 0;
  position:relative;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  border:1px solid var(--lm-white);
  border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(var(--lm-primary-rgb), .5);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-end;
}
.lmv-booking--a .lmv-booking__field{ flex:1; }
.lmv-booking--a .lmv-booking__label{
  display:block;
  color:var(--lm-primary);
  margin-bottom:6px;
}
.lmv-booking--a .lmv-booking__input{
  display:block;
  height:34px;
  background:var(--lm-white);
  border:1px solid rgba(var(--lm-primary-rgb), .2);
  border-radius:9px;
}
.lmv-booking__submit--a{
  background:var(--lm-primary);
  color:var(--lm-white);
  height:34px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-radius:9px;
  font-size:12px;
  font-weight:700;
}

/* ===== Frame B — Split editorial ===== */
.lmv-hero--b{ display:flex; height:430px; }
.lmv-hero--b .lmv-hero__copy{
  flex:0 0 48%;
  background:var(--lm-bg);
  padding:40px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lmv-hero--b .lmv-hero__location{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--lm-primary);
}
.lmv-hero--b .lmv-hero__location-dot{ color:var(--lm-gold); font-size:14px; }
.lmv-hero--b .lmv-hero__title--dark{
  font-family:var(--lm-font-heading);
  font-weight:500;
  font-size:54px;
  line-height:.98;
  color:var(--lm-ink);
  margin:0 0 16px;
}
.lmv-hero--b .lmv-hero__title-italic--primary{ color:var(--lm-primary); font-style:italic; }
.lmv-hero--b .lmv-hero__lead--dark{
  font-size:13px;
  line-height:1.6;
  color:var(--lm-text-muted);
  margin:0 0 24px;
}
.lmv-hero--b .lmv-hero__actions{ display:flex; gap:10px; }
.lmv-hero--b .lmv-hero__photo{
  flex:1;
  position:relative;
  border-radius:0 0 0 80px;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(160deg, #6aa3b6, #2f6175);
}
.lmv-hero--b .lmv-hero__tag{
  position:absolute; top:16px; right:18px;
  color:rgba(255,255,255,.6);
}

.lmv-booking--b{
  margin:-26px 32px 0;
  position:relative;
  background:var(--lm-white);
  border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(var(--lm-primary-rgb), .5);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-end;
}
.lmv-booking--b .lmv-booking__field{ flex:1; }
.lmv-booking--b .lmv-booking__label{
  display:block;
  color:var(--lm-primary);
  margin-bottom:6px;
}
.lmv-booking__input--b{
  display:block;
  height:34px;
  background:var(--lm-bg);
  border:1px solid rgba(var(--lm-primary-rgb), .18);
  border-radius:9px;
}
.lmv-booking__submit--b{
  background:var(--lm-accent);
  color:var(--lm-ink);
  height:34px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-radius:9px;
  font-size:12px;
  font-weight:700;
}

/* ===== Frame C — Centered minimal ===== */
.lmv-hero--c{
  position:relative;
  height:430px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 50px;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,0) 12px 24px),
    radial-gradient(120% 90% at 50% 20%, #6aa3b6, #234e60);
}
.lmv-hero--c .lmv-hero__tag--center{
  position:absolute; top:16px; left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.55);
}
.lmv-hero--c .lmv-hero__flower{
  color:var(--lm-accent);
  font-size:26px;
  margin-bottom:8px;
}
.lmv-hero--c .lmv-hero__location--center{
  color:var(--lm-accent);
  margin-bottom:14px;
  letter-spacing:.3em;
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-size:10px;
  text-transform:uppercase;
}
.lmv-hero--c .lmv-hero__title--center{
  font-family:var(--lm-font-heading);
  font-weight:500;
  font-size:62px;
  line-height:.96;
  color:var(--lm-white);
  margin:0 0 14px;
}
.lmv-hero--c .lmv-hero__title-italic{ color:var(--lm-accent-soft); font-style:italic; }
.lmv-hero--c .lmv-hero__lead--center{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
  max-width:340px;
  margin:0 0 22px;
}
.lmv-hero--c .lmv-btn--accent{ padding:12px 26px; }

.lmv-booking--c{
  margin:-26px 60px 0;
  position:relative;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-radius:var(--lm-radius-pill);
  box-shadow:0 18px 40px -22px rgba(var(--lm-primary-rgb), .5);
  padding:8px 8px 8px 22px;
  display:flex;
  gap:14px;
  align-items:center;
}
.lmv-booking__pill-label{
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lm-primary);
}
.lmv-booking__divider{ width:1px; height:20px; background:rgba(var(--lm-primary-rgb), .2); }
.lmv-booking__submit--c{
  margin-left:auto;
  background:var(--lm-primary);
  color:var(--lm-white);
  height:38px;
  display:flex;
  align-items:center;
  padding:0 22px;
  border-radius:var(--lm-radius-pill);
  font-size:12px;
  font-weight:700;
}

@media (max-width: 760px){
  .lmv-hero--a .lmv-hero__content{ max-width:100%; }
  .lmv-hero--a .lmv-hero__title,
  .lmv-hero--b .lmv-hero__title--dark,
  .lmv-hero--c .lmv-hero__title--center{ font-size:38px; }
  .lmv-hero--b{ flex-direction:column; height:auto; }
  .lmv-hero--b .lmv-hero__copy{ flex:none; }
  .lmv-hero--b .lmv-hero__photo{ height:220px; border-radius:0; }
  .lmv-booking--a,
  .lmv-booking--b{ flex-wrap:wrap; }
}