/* Yanga v5 · "Before he hosted yours, he lived his own" (his own wedding, flip cards) */
.groom { padding-block: clamp(5.5rem, 9vw, 9rem); overflow: clip; }
.groom__head { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.groom__portrait { margin: 0; position: relative; background: #FBF7EF; padding: 10px 10px 0; box-shadow: 0 1px 2px hsl(28 30% 12% / .12), 0 22px 40px -22px hsl(28 30% 12% / .5); rotate: -2deg; max-width: 420px; }
.groom__portrait > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.groom__portrait figcaption { display: flex; justify-content: space-between; align-items: center; padding: .6rem .2rem .7rem; }
.groom__portrait figcaption img { width: 110px; height: auto; rotate: -8deg; }
.groom .lede { color: var(--cognac); margin-top: 1rem; }
.groom .body { margin-top: .8rem; }

/* the view switch */
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.4rem; padding: .35rem; border-radius: 999px; background: var(--bone-2); border: 1px solid var(--hair-strong); }
.seg__label { font-size: .85rem; font-weight: 700; color: var(--ink-3); padding: 0 .4rem 0 .6rem; }
.seg__btn { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 0; background: transparent; font-weight: 700; font-size: .95rem; cursor: pointer; color: var(--ink); }
.seg__btn.is-on { background: var(--green); color: var(--bone); box-shadow: 0 2px 6px hsl(150 40% 10% / .3); }

/* the cards */
.flips-wrap { position: relative; }
.flips { display: grid; grid-auto-flow: column; grid-auto-columns: min(320px, 78vw); gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 4.2rem 1.8rem; scroll-padding-inline: 4.2rem; scrollbar-width: none; perspective: 1600px; }
.flips::-webkit-scrollbar { display: none; }
.flips-wrap .mnav { position: absolute; top: 45%; z-index: 3; translate: 0 -50%; }
.flip { scroll-snap-align: start; position: relative; height: 470px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.flip__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.flip[aria-pressed="true"] .flip__in { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px hsl(28 30% 12% / .12), 0 22px 40px -22px hsl(28 30% 12% / .5); }
.flip__front { background: #FBF7EF; display: grid; grid-template-rows: auto 1fr; }
.flip__img { display: block; aspect-ratio: 1 / .92; overflow: hidden; }
.flip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .flip:hover .flip__img img { transform: scale(1.05); } .flip:hover .flip__in { transform: rotateY(-6deg); } .flip[aria-pressed="true"]:hover .flip__in { transform: rotateY(186deg); } }
.flip__txt { display: grid; gap: .35rem; padding: .9rem 1rem 1rem; align-content: start; }
.flip__no { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.flip__who { font-family: var(--sc-font-display); font-style: italic; font-size: 1.05rem; color: var(--cognac); }
.flip__q { font-family: var(--sc-font-display); font-size: 1.22rem; line-height: 1.22; color: var(--ink); }
.flip__hint { margin-top: auto; padding-top: .4rem; font-size: .8rem; font-weight: 700; color: var(--green); }
.flip__back { transform: rotateY(180deg); background: var(--green); color: var(--bone); display: grid; align-content: center; gap: .7rem; padding: 1.6rem 1.4rem;
  background-image: radial-gradient(circle at 85% 12%, color-mix(in oklab, var(--orange) 22%, transparent), transparent 38%); }
.flip__back .flip__no { color: var(--on-green-2); }
.flip__back .flip__who { color: var(--cognac-lit); font-size: 1.2rem; }
.flip__back .flip__q { color: var(--bone); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
.flip__back .flip__hint { color: var(--orange); }
.flip__seal { width: 64px; height: 64px; }
.flip:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 6px; }
.groom__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: 1.4rem; padding-top: 1.6rem; border-top: 2px solid var(--ink); }
.groom__close .d-md { margin: 0; max-width: 28ch; }
@media (max-width: 900px) {
  .groom__head { grid-template-columns: 1fr; }
  .groom__portrait { max-width: 300px; }
  .flips { padding-inline: .4rem; scroll-padding-inline: .4rem; }
  .flips-wrap .mnav { top: auto; bottom: -58px; translate: none; } .flips-wrap .mnav--prev { left: calc(50% - 66px); } .flips-wrap .mnav--next { right: calc(50% - 66px); }
  .flips-wrap { margin-bottom: 64px; }
  .flip { height: 440px; }
}
@media (prefers-reduced-motion: reduce) { .flip__in { transition: none; } }