/* Flip Card — clean rewrite.
   Desktop: scroll-locked pin via JS (body overflow: hidden). No GSAP, no sticky,
            no min-height: 100vh. Section's natural height is preserved so the
            previous/next sections stay at their document positions.
   Mobile:  natural scroll, each card flips when fully in view, no pinning. */

/* ===== Section ===== */
.flip-cards {
  position: relative;
  /* Full-bleed at first paint. The JS below re-measures and corrects for
     asymmetric containers, but in a centred one (Dawn's page-width wrapper)
     this already matches what the JS computes, so nothing shifts. Leaving it
     at width:100% meant every block rendered inset until its script finished
     downloading — a visible gap on every load. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--fc-padding-y, 40px) 1.5rem;
  background-color: var(--fc-bg-color, #333333);
  color: var(--fc-text-color, #ffffff);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}

.flip-cards__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section heading inherits size from the theme's h2 rule (we don't set
   font-size here). Add the .h2 class to the markup so themes that style
   .h2 (class-based) rather than the h2 element still pick up the scale. */
.flip-cards__title {
  margin: 0 0 2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--fc-text-color, #ffffff);
}

/* ===== Grid — auto-sizes based on card count =====
   1 card  : centered, generous max width
   2 cards : 2-up, each slightly larger
   3 cards : 3-up, standard size */
.flip-cards__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  justify-content: center;
  width: 100%;
}
.flip-cards__grid[data-count="1"] {
  grid-template-columns: minmax(280px, 520px);
}
.flip-cards__grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(280px, 460px));
}
.flip-cards__grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(260px, 380px));
}

/* Mobile: stack regardless of count */
@media (max-width: 900px) {
  .flip-cards__grid[data-count] {
    grid-template-columns: minmax(260px, 380px);
  }
}

/* ===== Individual flip card ===== */
.flip-card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1200px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.flip-card__face {
  position: absolute;
  inset: 0;
  /* Match the theme's button corner radius so cards blend into the storefront.
     Falls back to 16px when the theme doesn't expose --buttons-radius. */
  border-radius: var(--buttons-radius, 16px);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

/* Front face defaults to the section bg color (keeps Horizon's design
   intent where cards blend with the section). A subtle inset shadow +
   1px border keeps the card outline visible in themes like Dawn whose
   placeholder SVG only draws outlines on a transparent fill. */
.flip-card__face--front {
  transform: rotateY(0deg);
  background-color: var(--fc-bg-color, #333333);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.15);
}

.flip-card__face--back {
  transform: rotateY(180deg);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem;
}

.flip-card__bg-image,
.flip-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.flip-card__overlay {
  /* Dawn ships a rule that collapses empty leaf div elements — same
     bug we hit on Counter Scroll's overlay. !important is the reliable
     override so the merchant's overlay opacity slider actually paints. */
  display: block !important;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--fc-overlay-alpha, 0.35));
  z-index: 1;
  pointer-events: none;
}

/* Front content */
.flip-card__front-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1.25rem;
  color: var(--fc-text-color, #fff);
}
/* Card front title matches theme's body font-size. Floor at 1rem so
   themes with tiny p defaults (Horizon) don't render this too small;
   otherwise use the parent's computed size (walks up to body) so
   themes with larger body scale (Dawn) look right too. */
.flip-card__front-title {
  margin: 0;
  font-size: max(1rem, 1em);
  line-height: 1.2;
  /* Dawn's `h3 { color: var(--color-foreground) }` element rule beats
     plain inheritance, so set color explicitly. */
  color: var(--fc-text-color, #fff);
}

/* Back content */
.flip-card__back-content {
  position: relative;
  z-index: 2;
  color: var(--fc-text-color, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
}
.flip-card__back-description {
  font-size: max(1rem, 1em);
  line-height: 1.5;
  opacity: 0.9;
}
/* Kept deliberately. The setting is inline_richtext now, which emits no
   block tags, but a merchant who filled this in while it was richtext still
   has <p> in their saved value -- Shopify keeps the stored string, it does
   not rewrite it on a type change. Without these their spacing would
   collapse. New content simply never matches. */
.flip-card__back-description p { margin: 0 0 0.5rem; }
.flip-card__back-description p:last-child { margin-bottom: 0; }
.flip-card__back-actions { margin-top: 0.25rem; }

/* ===== Back treatments (section-level) ===== */
.flip-cards--back-match .flip-card__face--back {
  background-color: var(--fc-bg-color, #333333);
}
.flip-cards--back-panel .flip-card__face--back {
  background-color: var(--fc-panel-color, #4a4a4a);
}
.flip-cards--back-soft-panel .flip-card__face--back,
.flip-cards--back-soft_panel .flip-card__face--back {
  background-color: var(--fc-soft-panel-color, #3f3f3f);
}
/* Glass: reads as a material even over solid backgrounds — diagonal sheen,
   edge highlight/shadow, outer drop for depth. Backdrop-filter is a bonus
   when the parent has a real backdrop. */
.flip-cards--back-glass .flip-card__face--back {
  background-color: var(--fc-bg-color, #333333);
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(0, 0, 0, 0.06) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ===== Outlined CTA button =====
   Merchant controls outline + text color via cta_color. All other button
   styling (padding, font, corner radius, etc.) inherits from the theme's
   .button class. */
.flip-card__button.button,
.flip-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fc-cta-color, #FF8820);
  border: 1px solid var(--fc-cta-color, #FF8820);
  text-decoration: none;
  /* Transition box-shadow (used to thicken the outline on hover). */
  transition: box-shadow 0.15s ease;
}
/* Dawn (and some other OS 2.0 themes) draw a second "shadow border" on
   .button via ::before/::after pseudo-elements. Kill both so only our
   controlled 1px border shows. */
.flip-card__button.button::before,
.flip-card__button.button::after {
  content: none !important;
  display: none !important;
}
/* On hover: keep background transparent, keep text color, and thicken
   the outline via an inset box-shadow. Using box-shadow (not
   border-width) means there's no layout shift as the "border" grows. */
.flip-card__button:hover,
.flip-card__button:focus-visible {
  background-color: transparent;
  color: var(--fc-cta-color, #FF8820);
  box-shadow: inset 0 0 0 2px var(--fc-cta-color, #FF8820);
}
/* Disabled variant: merchant set a label but no link. Rendered as a
   non-anchor span so it's non-clickable + non-focusable by default;
   dimmed opacity + not-allowed cursor communicate the state visually. */
.flip-card__button--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}
.flip-card__button--disabled:hover,
.flip-card__button--disabled:focus-visible {
  /* Don't apply the hover-fill treatment on the disabled state. */
  background-color: transparent;
  color: var(--fc-cta-color, #FF8820);
}

/* Reduced motion: snap to flipped state */
@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none !important; }
}