/* Flip Cards (SavvyMom): cards that flip from a designed front to a product back.
   Loaded only on articles tagged `flip-cards` (see flip-cards.php); markup comes from [sm_flip_cards].
   Design: docs/superpowers/specs/2026-10-06-savvymom-flip-cards-design.md (IdeonMedia workspace). */

/* Flip Cards Layout (Themer): reading parts at 760 px, the card grid at full width. */
.sm-flip-layout .fl-module:not(.sm-fc-module) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
/* The Article Layout's own CSS styles #sm-container; the Flip Cards Layout renames that row. */
#sm-flip-container .fl-row-content-wrap {
    padding-bottom: 0;
    box-shadow: 0 2px 2px 0 #ddd;
}

.sm-flip-cards {
    --sm-fc-ink: #32375f;     /* --sm-fc-accent, --sm-fc-on-accent and --sm-fc-bg come inline from [sm_flip_cards] */
    --sm-fc-text: #333;
    background: var(--sm-fc-bg, transparent);
    padding: 32px 24px;
    container-type: inline-size;
    box-sizing: border-box;
}
@media (max-width: 599px) {
    .sm-flip-cards { padding: 24px 0; }
    .sm-flip-cards--tinted { padding: 24px 12px; }
}
.sm-flip-cards *,
.sm-flip-cards *::before,
.sm-flip-cards *::after { box-sizing: border-box; }

.sm-flip-cards__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
}
/* Column switches keep every card at least ~317 px wide, so a 200-character copy always fits on the back. */
@container (min-width: 656px) {
    .sm-flip-cards__grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@container (min-width: 1000px) {
    .sm-flip-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

.sm-flip-cards .sm-fc { position: relative; aspect-ratio: 3 / 4; perspective: 1400px; container-type: inline-size; }

/* Invisible but focusable: Tab reaches it, Space flips. Card-sized, so when a tap focuses it
   (Android) the browser scrolls at most enough to show the card. Clicks pass through to the label. */
.sm-flip-cards .sm-fc__toggle {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; pointer-events: none;
}

.sm-flip-cards .sm-fc__inner {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform .4s ease;
}
.sm-flip-cards .sm-fc__toggle:checked ~ .sm-fc__inner { transform: rotateY(180deg); }
.sm-flip-cards .sm-fc__toggle:focus-visible ~ .sm-fc__inner { outline: 3px solid var(--sm-fc-ink); outline-offset: 4px; }

.sm-flip-cards .sm-fc__face {
    position: absolute; inset: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: visibility 0s;          /* the side coming into view switches on at once; backface keeps it invisible until it faces you */
}
.sm-flip-cards .sm-fc__back {
    transform: rotateY(180deg);
    background: #fff;
    border: 1px solid var(--sm-fc-accent);
    visibility: hidden;
    transition: visibility 0s .4s;      /* the side going away switches off after the flip, so no frame is blank */
}
.sm-flip-cards .sm-fc__toggle:checked ~ .sm-fc__inner .sm-fc__front { visibility: hidden; transition-delay: .4s; }
.sm-flip-cards .sm-fc__toggle:checked ~ .sm-fc__inner .sm-fc__back { visibility: visible; transition-delay: 0s; }

.sm-flip-cards .sm-fc__front img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sm-flip-cards .sm-fc__hit { position: absolute; inset: 0; margin: 0; cursor: pointer; }

.sm-flip-cards .sm-fc__icon {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .88);
    color: var(--sm-fc-ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    pointer-events: none;
}
.sm-flip-cards .sm-fc__icon svg { width: 18px; height: 18px; }
.sm-flip-cards .sm-fc__flipback { margin: 0; pointer-events: auto; cursor: pointer; background: #f3f1f4; box-shadow: none; }

.sm-flip-cards .sm-fc__link,
.sm-flip-cards .sm-fc__link:hover,
.sm-flip-cards .sm-fc__link:focus {
    display: flex; flex-direction: column; gap: 8px;
    height: 100%; padding: 18px;
    color: var(--sm-fc-text); text-decoration: none;
}
/* The photo takes whatever height the text leaves (at most 45%); the text never shrinks, so lines are never cut through. */
.sm-flip-cards .sm-fc__photo { flex: 1 1 0; min-height: 0; max-height: 45%; display: flex; align-items: center; justify-content: center; }
.sm-flip-cards .sm-fc__name,
.sm-flip-cards .sm-fc__copy,
.sm-flip-cards .sm-fc__footer { flex-shrink: 0; }
.sm-flip-cards .sm-fc__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm-flip-cards .sm-fc__name {
    font-family: Quicksand, "Source Sans Pro", sans-serif;
    font-weight: 700; font-size: 1.15rem; line-height: 1.25;
    color: var(--sm-fc-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-flip-cards .sm-fc__copy {
    font-size: .95rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
@container (max-width: 300px) {   /* very small phones */
    .sm-flip-cards .sm-fc__copy { -webkit-line-clamp: 4; }
}
.sm-flip-cards .sm-fc__footer {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--sm-fc-accent);
}
.sm-flip-cards .sm-fc__price { font-weight: 700; }
.sm-flip-cards .sm-fc__button {
    margin-left: auto;
    padding: 10px 16px;
    background: var(--sm-fc-accent); color: var(--sm-fc-on-accent);
    font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.sm-flip-cards .sm-fc__link:hover .sm-fc__button,
.sm-flip-cards .sm-fc__link:focus-visible .sm-fc__button { filter: brightness(.92); }
.sm-flip-cards .sm-fc__link:focus-visible { outline: 3px solid var(--sm-fc-ink); outline-offset: -6px; }

/* Mouse devices flip on hover, like Bustle; touch keeps tap-to-flip, keyboard keeps Space. */
@media (hover: hover) and (pointer: fine) {
    .sm-flip-cards .sm-fc:hover .sm-fc__inner { transform: rotateY(180deg); }
    .sm-flip-cards .sm-fc:hover .sm-fc__front { visibility: hidden; transition-delay: .4s; }
    .sm-flip-cards .sm-fc:hover .sm-fc__back { visibility: visible; transition-delay: 0s; }
    .sm-flip-cards .sm-fc__hit { pointer-events: none; }   /* a click mid-flip must not leave the card stuck open */
    .sm-flip-cards .sm-fc__flipback { display: none; }
}

.sm-flip-cards .screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Editors only: a card that can't be shown and why. */
.sm-flip-cards .sm-fc-note { padding: 12px; border: 2px dashed #c00; color: #c00; font-size: .9rem; }

/* Print (Print-O-Matic prints the page in place): every card prints its product side, unrotated. */
@media print {
    .sm-flip-cards .sm-fc { perspective: none; break-inside: avoid; }
    .sm-flip-cards .sm-fc__inner,
    .sm-flip-cards .sm-fc__toggle:checked ~ .sm-fc__inner { transform: none; transition: none; }
    .sm-flip-cards .sm-fc__front,
    .sm-flip-cards .sm-fc__icon { display: none; }
    .sm-flip-cards .sm-fc__back { transform: none; visibility: visible; transition: none; }
}

/* No prefers-reduced-motion override: the flip plays for everyone, like Bustle (decided 2026-10-06). */