/* Flip Cards — kabdalis2 design system.
   3D flip: hover on devices that hover (CSS), tap/keyboard via view.js
   (.is-flipped). Reduced motion swaps the 3D rotation for a plain
   opacity crossfade — same content, no movement. */
.b-flip{
    display:grid; gap:20px;
    grid-template-columns:repeat(3, 1fr);
}
.b-flip--cols-2{ grid-template-columns:repeat(2, 1fr); }
.b-flip--cols-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width: 900px){
    .b-flip, .b-flip--cols-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
    .b-flip, .b-flip--cols-2, .b-flip--cols-4{ grid-template-columns:1fr; }
}

.b-flipcard{
    position:relative;
    aspect-ratio:4 / 5;
    perspective:1200px;
    cursor:pointer;
    outline-offset:3px;
}
.b-flipcard__inner{
    position:relative;
    width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform 500ms ease;
}
.b-flipcard.is-flipped .b-flipcard__inner{ transform:rotateY(180deg); }
/* Hover flip only on devices that actually hover — touch taps instead. */
@media (hover: hover){
    .b-flipcard:hover .b-flipcard__inner,
    .b-flipcard:focus-visible .b-flipcard__inner{ transform:rotateY(180deg); }
}

.b-flipcard__face{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:var(--radius, 14px);
    overflow:hidden;
}
.b-flipcard__face--front{
    background:var(--surface, #fff);
    border:1px solid var(--line, #e4ded2);
}
.b-flipcard__face--front .photo{ flex:1; min-height:0; background:var(--surface2, #f5f1ea); }
.b-flipcard__face--front .photo img{
    width:100%; height:100%;
    object-fit:cover; display:block;
}
.b-flipcard__ft{
    margin:0; padding:14px 16px 4px;
    font-size:1.05rem;
    color:var(--ink, #25211b);
}
.b-flipcard__hint{
    display:inline-flex; align-items:center; gap:6px;
    padding:0 16px 14px;
    font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted, #8a8070);
}
.b-flipcard__face--back{
    justify-content:center; gap:10px;
    padding:22px 20px;
    text-align:center;
    background:var(--pine, #2e5d49);
    color:#fff;
    transform:rotateY(180deg);
}
.b-flipcard__bt{ margin:0; font-size:1.15rem; color:inherit; }
.b-flipcard__bx{ margin:0; font-size:.95rem; line-height:1.5; opacity:.92; }
.b-flipcard__face--back .link-arrow{ color:#fff; margin-top:4px; align-self:center; }

/* Reduced motion: no 3D — instant opacity crossfade instead. */
@media (prefers-reduced-motion: reduce){
    .b-flipcard__inner{ transition:none; transform-style:flat; }
    .b-flipcard.is-flipped .b-flipcard__inner{ transform:none; }
    .b-flipcard__face{
        transition:none;
        backface-visibility:visible;
        -webkit-backface-visibility:visible;
    }
    .b-flipcard__face--back{ transform:none; opacity:0; pointer-events:none; }
    .b-flipcard.is-flipped .b-flipcard__face--back{ opacity:1; pointer-events:auto; }
    .b-flipcard.is-flipped .b-flipcard__face--front{ opacity:0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover){
    .b-flipcard:hover .b-flipcard__inner,
    .b-flipcard:focus-visible .b-flipcard__inner{ transform:none; }
    .b-flipcard:hover .b-flipcard__face--back,
    .b-flipcard:focus-visible .b-flipcard__face--back{ opacity:1; pointer-events:auto; }
    .b-flipcard:hover .b-flipcard__face--front,
    .b-flipcard:focus-visible .b-flipcard__face--front{ opacity:0; }
}