/* =====================================
   OFR Card Stack — Component Styles
   Plugin-owned
   File: assets/css/ofr-card-stack.css
===================================== */

/* =========================
   0) THEME TOKENS (per-card via CSS vars)
   Default values (theme=default)
========================= */
.ofr-card-stack{
  /* Card surface + text */
  --ofr-card-bg: var(--ofr-white);
  --ofr-card-fg: var(--ofr-ocean-dark);

  /* Button tokens within card (default uses global primary tokens) */
  --ofr-card-btn-bg: var(--ofr-btn-primary-bg);
  --ofr-card-btn-text: var(--ofr-btn-primary-text);
  --ofr-card-btn-border: var(--ofr-btn-primary-border);

  --ofr-card-btn-bg-hover: var(--ofr-btn-primary-bg-hover);
  --ofr-card-btn-text-hover: var(--ofr-btn-primary-text-hover);
  --ofr-card-btn-border-hover: var(--ofr-btn-primary-border-hover);
}

/* Light theme (same as default for now, hook for later) */
.ofr-card-stack.is-theme-light{
  --ofr-card-bg: var(--ofr-white);
  --ofr-card-fg: var(--ofr-ocean-dark);

  --ofr-card-btn-bg: var(--ofr-btn-primary-bg);
  --ofr-card-btn-text: var(--ofr-btn-primary-text);
  --ofr-card-btn-border: var(--ofr-btn-primary-border);

  --ofr-card-btn-bg-hover: var(--ofr-btn-primary-bg-hover);
  --ofr-card-btn-text-hover: var(--ofr-btn-primary-text-hover);
  --ofr-card-btn-border-hover: var(--ofr-btn-primary-border-hover);
}

/* Dark theme (token-first, no dependency on *-dark vars existing) */
.ofr-card-stack.is-theme-dark{
  --ofr-card-bg: var(--ofr-ocean-dark);
  --ofr-card-fg: var(--ofr-white);

  /* Dark card button: white fill, dark text; hover becomes transparent */
  --ofr-card-btn-bg: var(--ofr-white);
  --ofr-card-btn-text: var(--ofr-ocean-dark);
  --ofr-card-btn-border: var(--ofr-white);

  --ofr-card-btn-bg-hover: transparent;
  --ofr-card-btn-text-hover: var(--ofr-white);
  --ofr-card-btn-border-hover: var(--ofr-white);
}

/* =========================
   1) SHELL
========================= */
.ofr-card-stack{
  background: var(--ofr-card-bg);
  border-radius: var(--ofr-radius-lg);
  overflow: hidden;
  width: 100%;
  color: var(--ofr-card-fg);
}

/* Shadow options */
.ofr-card-stack.is-shadow-lg{ box-shadow: var(--ofr-shadow-lg); }
.ofr-card-stack.is-shadow-none{ box-shadow: none; }

/* Radius options */
.ofr-card-stack.radius-lg{ border-radius: var(--ofr-radius-lg); }
.ofr-card-stack.radius-md{ border-radius: var(--ofr-radius-md); }
.ofr-card-stack.radius-sm{ border-radius: var(--ofr-radius-sm); }

/* =========================
   2) CLICKABLE LINK WRAPPER
========================= */
.ofr-card-stack__link{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ofr-card-stack.is-clickable{
  cursor: pointer;
  transition: none;
}

.ofr-card-stack.is-clickable:hover{
  transform: none;
}

/* Static CTA (visual-only) inside clickable Card Stack */
.ofr-card-stack .ofr-btn.is-static{
  pointer-events: none;
  cursor: default;
}

.ofr-card-stack .ofr-btn.is-static:hover,
.ofr-card-stack .ofr-btn.is-static:focus,
.ofr-card-stack .ofr-btn.is-static:focus-visible{
  background: var(--ofr-card-btn-bg);
  color: var(--ofr-card-btn-text) !important;
  border-color: var(--ofr-card-btn-border);
  outline: none;
}


/* =========================
   3) MEDIA (3/2 ratio preferred)
========================= */
/* Legacy fallback */
.ofr-card-stack__media img{
  display: block;
  width: 100%;
  height: var(--ofr-card-media-h, 280px);
  object-fit: cover;
}

/* Mobile fallback */
@media (max-width: 768px){
  .ofr-card-stack__media img{
    height: var(--ofr-card-media-h-m, 220px);
  }
}

/* Preferred ratio */
@supports (aspect-ratio: 3 / 2){
  .ofr-card-stack__media{
    aspect-ratio: 3 / 2; /* 1.5 */
    width: 100%;
    overflow: hidden;
  }
  .ofr-card-stack__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* =========================
   CLICKABLE IMAGE ZOOM (Card Stack)
   - Keep media container fixed
   - Zoom only the image
   - Triggered by hover on the whole card
========================= */

/* Ensure media frame crops the zoomed image */
.ofr-card-stack__media{
  overflow: hidden;
}

/* Smooth zoom */
.ofr-card-stack__media img{
  transform: scale(1);
  transition: transform 0.35s ease;
  will-change: transform;
}

/* Only zoom when the card is clickable */
.ofr-card-stack.is-clickable:hover .ofr-card-stack__media img{
  transform: scale(1.04);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ofr-card-stack__media img{
    transition: none;
  }
  .ofr-card-stack.is-clickable:hover .ofr-card-stack__media img{
    transform: none;
  }
}


/* =========================
   4) BODY + TYPOGRAPHY
========================= */
.ofr-card-stack__body{
  padding: var(--ofr-space-sm) var(--ofr-space-md) var(--ofr-space-md-lg) var(--ofr-space-md); /* 32 / 40 / 48 / 40 */
  text-align: center;
}

/* Mobile: reduce horizontal padding by one step */
@media (max-width: 768px){
  .ofr-card-stack__body{
    padding-left:  var(--ofr-space-s); /* 26 */
    padding-right: var(--ofr-space-s); /* 26 */
  }
}

/* Base typography (token-first). Color is reinforced later with higher specificity. */
.ofr-card-stack__body p,
.ofr-card-stack__body h4{
  margin: 0;
  font-family: var(--ofr-font-sans);
  text-transform: none;
}

/* Card eyebrow — uses global eyebrow role tokens */
.ofr-card-stack__body .ofr-card__eyebrow{
  font-size: var(--ofr-eyebrow-size);
  font-weight: var(--ofr-eyebrow-weight);
  line-height: var(--ofr-eyebrow-line);
  letter-spacing: var(--ofr-eyebrow-letter);
  font-variant: all-small-caps;
  margin-bottom: var(--ofr-space-xs); /* 16px */
}

/* Title */
.ofr-card-stack__body .ofr-card__title{
  font-size: var(--ofr-card-title-size, var(--ofr-text-h4));
  font-weight: var(--ofr-card-title-weight, 600);
  line-height: var(--ofr-card-title-line, 1.3);
  margin-bottom: var(--ofr-space-s); /* 24px */
}

/* Body text */
.ofr-card-stack__body .ofr-card__text{
  font-size: var(--ofr-card-text-size, var(--ofr-text-base));
  font-weight: var(--ofr-card-text-weight, 400);
  line-height: var(--ofr-card-text-line, 1.5);
  margin-bottom: 0;
}

/* CTA wrapper spacing */
.ofr-card-stack__cta{
  margin-top: var(--ofr-space-sm); /* 32px */
  display: flex;
  justify-content: center;
}

/* =========================
   5) BUTTON (scoped to card)
   Ensure we beat .ofr-btn.is-primary even if global CSS loads later
========================= */
.ofr-card-stack .ofr-btn,
.ofr-card-stack .ofr-btn.is-primary,
.ofr-card-stack .ofr-btn.is-secondary{
  background: var(--ofr-card-btn-bg);
  color: var(--ofr-card-btn-text) !important;
  border-color: var(--ofr-card-btn-border);
}

.ofr-card-stack .ofr-btn:hover,
.ofr-card-stack .ofr-btn:focus-visible,
.ofr-card-stack .ofr-btn.is-primary:hover,
.ofr-card-stack .ofr-btn.is-primary:focus-visible,
.ofr-card-stack .ofr-btn.is-secondary:hover,
.ofr-card-stack .ofr-btn.is-secondary:focus-visible{
  background: var(--ofr-card-btn-bg-hover);
  color: var(--ofr-card-btn-text-hover) !important;
  border-color: var(--ofr-card-btn-border-hover);
}

/* -------------------------
   Static CTA (visual-only)
   - Used when whole card is clickable
   - No hover, no focus, no pointer events
-------------------------- */
.ofr-card-stack .ofr-btn.is-static{
  pointer-events: none;
  cursor: default;
}

/* Guard: neutralise any hover/focus rules for static CTA */
.ofr-card-stack .ofr-btn.is-static:hover,
.ofr-card-stack .ofr-btn.is-static:focus,
.ofr-card-stack .ofr-btn.is-static:focus-visible{
  background: inherit;
  color: inherit;
  border-color: inherit;
  outline: none;
}

/* =========================
   6) THEME ENFORCEMENT (HARD OVERRIDES)
   This is the important bit: it beats .ofr-base + theme swatches.
   Only forces COLOR via !important (safe, scoped).
========================= */
.ofr-card-stack .ofr-card-stack__body,
.ofr-card-stack .ofr-card-stack__body *{
  /* Let nested elements inherit correctly unless specified */
  color: inherit;
}

.ofr-card-stack .ofr-card-stack__body{
  color: var(--ofr-card-fg) !important;
}

/* Force card text elements to follow card fg, not .ofr-base or swatch theme */
.ofr-card-stack .ofr-card-stack__body .ofr-card__eyebrow,
.ofr-card-stack .ofr-card-stack__body .ofr-card__title,
.ofr-card-stack .ofr-card-stack__body .ofr-card__text{
  color: var(--ofr-card-fg) !important;
}

/* If the theme targets raw h4/p strongly, harden those too */
.ofr-card-stack .ofr-card-stack__body h4,
.ofr-card-stack .ofr-card-stack__body p{
  color: var(--ofr-card-fg) !important;
}

/* =========================
   7) STACKED SPACING (when columns stack)
========================= */
@media (max-width: 991px){
  .ofr-room-options__cards > .col-md-6:not(:last-child) .ofr-card-stack{
    margin-bottom: var(--ofr-space-xl); /* 80px */
  }
}

@media (max-width: 768px){
  .ofr-room-options__cards > .col-md-6:not(:last-child) .ofr-card-stack{
    margin-bottom: var(--ofr-space-md);
  }
}