/* =========================================================
   FLIP CARDS - FLEXIBLE HEIGHT AND RESPONSIVE LAYOUT
   ========================================================= */

/* LAYOUT */
.flip-cards { display: flex !important; flex-wrap: wrap; gap: 1.5rem; width: 100%; margin: 2rem 0; align-items: stretch; }
.flip-cards *, .flip-cards *::before, .flip-cards *::after { box-sizing: border-box; }

/* CARD CONTAINER - HEIGHT DETERMINED BY FRONT CONTENT */
.flip-cards > .flip-card { position: relative; display: flex; flex-direction: column; flex: 0 0 calc(25% - 1.125rem); width: calc(25% - 1.125rem); min-width: 0; margin: 0; perspective: 1400px; transform: translateY(0) scale(1); transition: transform .3s ease, filter .3s ease; }

/* OPTIONAL THREE-COLUMN LAYOUT */
@media (min-width: 1101px) { .flip-cards.flip-cards-3 > .flip-card { flex-basis: calc(33.333% - 1rem); width: calc(33.333% - 1rem); } }

/* CARD HOVER */
@media (hover: hover) and (pointer: fine) { .flip-cards > .flip-card:hover { transform: translateY(-12px) scale(1.045); filter: drop-shadow(0 18px 18px rgba(0,0,0,.22)); z-index: 5; } }

/* CARD FOCUS */
.flip-cards > .flip-card:focus-within { z-index: 5; outline: none; }
.flip-cards > .flip-card:focus-within:has(:focus-visible) { outline: 3px solid #002d72; outline-offset: 4px; }

/* REMOVE MOUSE-CLICK FOCUS BORDERS */
.flip-cards .flip-card-open:focus:not(:focus-visible), .flip-cards .flip-card-close:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* FRONT - STAYS IN DOCUMENT FLOW TO DETERMINE HEIGHT */
.flip-card-front { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-height: 370px; height: auto; border: 1px solid #ddd; border-radius: 6px; background: #fff; overflow: hidden; cursor: pointer; }

/* BACK - MATCHES HEIGHT OF CARD */
.flip-card-back { position: absolute; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 1.25rem; border: 1px solid #ddd; border-radius: 6px; background: #f2f5f9; overflow-x: hidden; overflow-y: auto; z-index: 1; }
.flip-card-back[hidden] { display: none !important; }

/* HIDE ORIGINAL FRONT WHEN FRENCH DOORS ARE CREATED */
.flip-card.has-doors .flip-card-front { opacity: 0; }
.flip-card.is-open .flip-card-front { pointer-events: none; }

/* FRENCH DOOR PANELS */
.flip-door { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; overflow: hidden; background: #fff; pointer-events: none; backface-visibility: hidden; transition: transform .55s cubic-bezier(.3,.7,.2,1), box-shadow .55s ease; }
.flip-door-left { left: 0; transform-origin: left center; border-radius: 6px 0 0 6px; }
.flip-door-right { right: 0; transform-origin: right center; border-radius: 0 6px 6px 0; }
.flip-card.is-open .flip-door-left { transform: rotateY(-110deg); box-shadow: 14px 6px 22px rgba(0,0,0,.3); }
.flip-card.is-open .flip-door-right { transform: rotateY(110deg); box-shadow: -14px 6px 22px rgba(0,0,0,.3); }

/* DUPLICATED VISUAL FRONT INSIDE EACH DOOR */
.flip-door-copy { position: absolute; top: 0; left: 0; width: 200%; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #ddd; overflow: hidden; }
.flip-door-right .flip-door-copy { left: -100%; }
.flip-door-copy img { display: block; width: 100%; height: 135px; object-fit: cover; flex-shrink: 0; }
.flip-door-copy .flip-card-content { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }

/* FRONT CONTENT */
.flip-card-front img { display: block; width: 100%; height: 135px; object-fit: cover; flex-shrink: 0; }
.flip-card-content { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.flip-card h3 { margin: 0 0 .75rem; color: #002d72; font-size: 1.3rem; line-height: 1.3; }
.flip-card p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.5; }
.flip-card-back p { margin-bottom: .8rem; }
.flip-card-back strong { color: #002d72; }

/* BUTTONS */
.flip-card-open, .flip-card-close { display: block; width: 100%; margin-top: auto; padding: .75rem 1rem; border: 0; border-radius: 4px; background: #002d72; color: #fff; font: inherit; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; }
.flip-card-open:hover, .flip-card-close:hover { background: #0057a8; color: #fff; }
.flip-card-open:focus-visible, .flip-card-close:focus-visible { outline: 3px solid #c8102e; outline-offset: -3px; }

/* RESPONSIVE */
@media (max-width: 1100px) { .flip-cards > .flip-card { flex-basis: calc(33.333% - 1rem); width: calc(33.333% - 1rem); } }
@media (max-width: 850px) { .flip-cards > .flip-card { flex-basis: calc(50% - .75rem); width: calc(50% - .75rem); } }
@media (max-width: 550px) { .flip-cards > .flip-card { flex-basis: 100%; width: 100%; } }

/* ACCESSIBILITY - REDUCED MOTION */
@media (prefers-reduced-motion: reduce) { .flip-cards > .flip-card { transition: none !important; transform: none !important; filter: none !important; } .flip-door { transition: none !important; } .flip-card.is-open .flip-door { visibility: hidden; } }