/* =========================================================
   LA MARINA: Airbnb-style layer for NEW pages (ADR 0001)
   Spec: .lamarina/design/airbnb.md
   Structure (radius, spacing, type scale, card patterns) follows Airbnb.
   Colors and fonts stay La Marina (tokens.css); Airbnb Rausch and Cereal font are NOT used.
   Additive only: does not change existing homepage tokens.
   ========================================================= */
:root{
  /* radius (Airbnb scale) */
  --lm-ab-r-xs: 4px;
  --lm-ab-r-sm: 8px;
  --lm-ab-r-md: 14px;   /* property/room cards */
  --lm-ab-r-lg: 20px;
  --lm-ab-r-xl: 32px;   /* buttons */

  /* spacing (Airbnb scale) */
  --lm-ab-s-xs: 4px;
  --lm-ab-s-sm: 8px;
  --lm-ab-s-md: 12px;
  --lm-ab-s-base: 16px;
  --lm-ab-s-lg: 24px;
  --lm-ab-s-xl: 32px;
  --lm-ab-s-xxl: 48px;
  --lm-ab-s-section: 64px;

  /* neutrals: La Marina brand tokens (tokens.css) */
  --lm-ab-ink: var(--lm-ink);
  --lm-ab-body: var(--lm-ink-soft);
  --lm-ab-muted: var(--lm-text-muted);
  --lm-ab-hairline: var(--lm-border-faint);
  --lm-ab-surface-soft: var(--lm-bg);

  /* type scale (Airbnb sizes; fonts unchanged: Cormorant Garamond headings, Manrope body) */
  --lm-ab-fs-display: 28px;
  --lm-ab-fs-title: 22px;
  --lm-ab-fs-sub: 16px;
  --lm-ab-fs-body: 16px;
  --lm-ab-lh-body: 1.5;
}

/* Room card: photo first, rounded, price hierarchy */
.lm-ab-card{
  background:#fff;
  border-radius:var(--lm-ab-r-md);
  overflow:hidden;
  color:var(--lm-ab-ink);
  font-family:var(--lm-font-body);
}
.lm-ab-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.lm-ab-card__body{padding:var(--lm-ab-s-base) 0}
.lm-ab-card__title{font-family:var(--lm-font-heading);font-size:var(--lm-ab-fs-sub);font-weight:600;line-height:1.25;margin:0}
.lm-ab-card__meta{color:var(--lm-ab-muted);font-size:14px;margin:var(--lm-ab-s-xs) 0 0}
.lm-ab-card__price{margin-top:var(--lm-ab-s-sm);font-weight:600}
.lm-ab-card__price span{font-weight:400;color:var(--lm-ab-muted)}

/* Primary button: La Marina primary color, Airbnb shape */
.lm-ab-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:14px 24px;
  border-radius:var(--lm-ab-r-xl);
  background:var(--lm-primary);color:#fff;
  font-family:var(--lm-font-body);font-weight:600;font-size:16px;
  text-decoration:none;border:0;cursor:pointer;
  transition:background var(--lm-dur-fast) var(--lm-ease);
}
.lm-ab-btn:hover{background:var(--lm-primary-dark)}

/* ---- Room pages (template-rooms.php): reuse homepage components (lm-header, lm-room-card, lm-footer) ---- */
.lm-ab-page{background:var(--lm-bg);color:var(--lm-ink);font-family:var(--lm-font-body);margin:0}
.lm-ab-page .lm-ab-header{position:sticky;top:0}
.lm-ab-page .lm-header__inner > .brxe-block{display:flex;flex-direction:row;align-items:center;gap:20px;width:auto}
.lm-ab-page .lm-header__inner > .brxe-block img{width:60px;height:60px;object-fit:contain;flex:none}
.lm-ab-main{padding:var(--lm-ab-s-xxl) var(--lm-gutter) calc(var(--lm-ab-s-section) + 16px)}
.lm-ab-crumbs{color:var(--lm-text-mute-2);font-size:14px;margin-bottom:var(--lm-ab-s-lg)}
.lm-ab-crumbs a{color:inherit}
.lm-ab-lead{max-width:760px;margin-bottom:var(--lm-ab-s-xl)}
.lm-ab-section{margin-top:var(--lm-ab-s-xxl)}
.lm-ab-h2{font-family:var(--lm-font-heading);font-size:clamp(26px,3vw,36px);font-weight:500;margin:0 0 var(--lm-ab-s-base);color:var(--lm-ink)}
.lm-ab-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lm-ab-s-sm);border-radius:var(--lm-radius-lg);overflow:hidden}
.lm-ab-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.lm-ab-gallery__main{grid-column:1/-1;aspect-ratio:16/9!important}
.lm-ab-page .lm-rooms__grid{margin-top:var(--lm-ab-s-lg)}
.lm-room-card__name a{color:inherit;text-decoration:none}
.lm-room-card__media{display:block}
.lm-room-card .lm-btn--book,.lm-room-card .lm-btn--outline{text-align:center;text-decoration:none}
.lm-ab-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--lm-radius-sm);overflow:hidden;box-shadow:var(--lm-shadow-card)}
.lm-ab-table th,.lm-ab-table td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(var(--lm-primary-rgb),.1)}
.lm-ab-table th{font-weight:700;width:30%;color:var(--lm-ink-soft)}
.lm-ab-table--cmp th{width:auto}
.lm-ab-cta{background:#fff;border-radius:var(--lm-radius-lg);padding:var(--lm-ab-s-xl);box-shadow:var(--lm-shadow-card)}
@media(max-width:700px){.lm-ab-gallery{grid-template-columns:1fr}}
/* Mobile: match homepage header sizes and keep tables inside the viewport */
/* Footer: same look as the homepage footer (those values come from per-element Bricks CSS there) */
.lm-ab-page .lm-footer{display:flex;flex-direction:column;align-items:center}
.lm-ab-page .lm-footer__top{width:100%}
.lm-ab-page .lm-footer__logo{width:auto!important;height:60px!important;display:block}
.lm-ab-page .lm-footer__brand-name{text-transform:uppercase;line-height:14px}
.lm-ab-page .lm-footer__brand-name small{text-transform:uppercase}
.lm-ab-page .lm-footer__top > nav{display:flex;flex-wrap:nowrap;gap:30px}
.lm-ab-page .lm-footer__nav-link{font-size:14px}
.lm-ab-page .lm-footer .brxe-text{font-size:15px;text-transform:uppercase;margin-top:20px;text-align:start}
.lm-ab-page .lm-footer .brxe-text p{margin:0}
@media(max-width:767px){
  .lm-ab-page .lm-header__inner{padding-left:10px;padding-right:10px}
  .lm-ab-page .lm-header__inner > .brxe-block{gap:8px}
  .lm-ab-page .lm-header__inner > .brxe-block img{width:50px;height:50px}
  .lm-ab-page .lm-header__brand-name{font-size:26px}
  .lm-ab-page .lm-header__brand-sub{font-size:12px;letter-spacing:2.64px}
  .lm-ab-table--cmp{display:block;overflow-x:auto;white-space:nowrap}
}