.flipcard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  contain: layout style;
}

@media screen and (min-width: 1024px) {

  .htype {
    padding-top: 82px;
  }
}

/* Sections participate directly in the parent grid on desktop */
.flipcard-section {
  display: contents;
}

/* Layout 1 (Default) - Tall Left, Wide Top-Right */
.flipcard-grid:not([class*="layout-"]) .item-1,
.flipcard-grid.layout-1 .item-1 {
  grid-column: 1;
  grid-row: span 2;
}

.flipcard-grid:not([class*="layout-"]) .item-2,
.flipcard-grid.layout-1 .item-2 {
  grid-column: 2;
  grid-row: 1;
}

.flipcard-grid:not([class*="layout-"]) .item-3,
.flipcard-grid.layout-1 .item-3 {
  grid-column: 2;
  grid-row: 2;
}

.flipcard-grid:not([class*="layout-"]) .item-4,
.flipcard-grid.layout-1 .item-4 {
  grid-column: 3 / span 2;
  grid-row: 1;
}

.flipcard-grid:not([class*="layout-"]) .item-5,
.flipcard-grid.layout-1 .item-5 {
  grid-column: 3;
  grid-row: 2;
}

.flipcard-grid:not([class*="layout-"]) .item-6,
.flipcard-grid.layout-1 .item-6 {
  grid-column: 4;
  grid-row: 2;
}

/* Layout 2 - Wide Bottom-Left, Tall Right */
.flipcard-grid.layout-2 .item-1 {
  grid-column: 1;
  grid-row: 1;
}

.flipcard-grid.layout-2 .item-2 {
  grid-column: 2;
  grid-row: 1;
}

.flipcard-grid.layout-2 .item-3 {
  grid-column: 3;
  grid-row: 1;
}

.flipcard-grid.layout-2 .item-4 {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.flipcard-grid.layout-2 .item-5 {
  grid-column: 3;
  grid-row: 2;
}

.flipcard-grid.layout-2 .item-6 {
  grid-column: 4;
  grid-row: span 2;
}

/* Layout 3 - Two Wide (Stacked Left) */
.flipcard-grid.layout-3 .item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.flipcard-grid.layout-3 .item-2 {
  grid-column: 3;
  grid-row: 1;
}

.flipcard-grid.layout-3 .item-3 {
  grid-column: 4;
  grid-row: 1;
}

.flipcard-grid.layout-3 .item-4 {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.flipcard-grid.layout-3 .item-5 {
  grid-column: 3;
  grid-row: 2;
}

.flipcard-grid.layout-3 .item-6 {
  grid-column: 4;
  grid-row: 2;
}

/* Layout 4 - Two Tall (Sides) */
.flipcard-grid.layout-4 .item-1 {
  grid-column: 1;
  grid-row: span 2;
}

.flipcard-grid.layout-4 .item-2 {
  grid-column: 2;
  grid-row: 1;
}

.flipcard-grid.layout-4 .item-3 {
  grid-column: 2;
  grid-row: 2;
}

.flipcard-grid.layout-4 .item-4 {
  grid-column: 3;
  grid-row: 1;
}

.flipcard-grid.layout-4 .item-5 {
  grid-column: 3;
  grid-row: 2;
}

.flipcard-grid.layout-4 .item-6 {
  grid-column: 4;
  grid-row: span 2;
}

/* Layout 5 - Two Wide Top, Four Bottom */
.flipcard-grid.layout-5 .item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.flipcard-grid.layout-5 .item-2 {
  grid-column: 3 / span 2;
  grid-row: 1;
}

.flipcard-grid.layout-5 .item-3 {
  grid-column: 1;
  grid-row: 2;
}

.flipcard-grid.layout-5 .item-4 {
  grid-column: 2;
  grid-row: 2;
}

.flipcard-grid.layout-5 .item-5 {
  grid-column: 3;
  grid-row: 2;
}

.flipcard-grid.layout-5 .item-6 {
  grid-column: 4;
  grid-row: 2;
}

/* Layout 6 - Center Wide */
.flipcard-grid.layout-6 .item-1 {
  grid-column: 1;
  grid-row: 1;
}

.flipcard-grid.layout-6 .item-2 {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.flipcard-grid.layout-6 .item-3 {
  grid-column: 4;
  grid-row: 1;
}

.flipcard-grid.layout-6 .item-4 {
  grid-column: 1;
  grid-row: 2;
}

.flipcard-grid.layout-6 .item-5 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.flipcard-grid.layout-6 .item-6 {
  grid-column: 4;
  grid-row: 2;
}

/* Layout 7 - Uniform Grid (six equal cards, one image size)
   No tall or wide slots, so every card takes the same photo: 800x480 on
   desktop / tablet, 410x230 on mobile. Cards are placed automatically in
   document order, three per row. */
.flipcard-grid.layout-7 {
  grid-template-columns: repeat(3, 1fr);
}

.flipcard-grid.layout-7 .flipcard {
  aspect-ratio: 800 / 480;
  height: 100%;
}

/* ==========================================================================
   FlipCard Base 3D Styles & Physical Perspectives
   ========================================================================== */

.flipcard {
  -webkit-perspective: 1400px;
  perspective: 1400px;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  aspect-ratio: 455 / 250;
  box-sizing: border-box;
  outline: none;
  position: relative;
  transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s ease-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* Desktop: Tall cards spanning 2 rows stretch seamlessly across both rows */
.flipcard-grid:not([class*="layout-"]) .item-1,
.flipcard-grid.layout-1 .item-1,
.flipcard-grid.layout-2 .item-6,
.flipcard-grid.layout-4 .item-1,
.flipcard-grid.layout-4 .item-6 {
  aspect-ratio: auto;
  height: 100%;
}

/* Desktop: Wide cards spanning 2 columns use 925x250 aspect ratio */
.flipcard-grid:not([class*="layout-"]) .item-4,
.flipcard-grid.layout-1 .item-4,
.flipcard-grid.layout-2 .item-4,
.flipcard-grid.layout-3 .item-1,
.flipcard-grid.layout-3 .item-4,
.flipcard-grid.layout-5 .item-1,
.flipcard-grid.layout-5 .item-2,
.flipcard-grid.layout-6 .item-2,
.flipcard-grid.layout-6 .item-5 {
  aspect-ratio: 925 / 250;
  height: 100%;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.2, 0.85, 0.4, 1.15);
  transition: transform 0.8s cubic-bezier(0.2, 0.85, 0.4, 1.15);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border-radius: 12px;
}

/* Flip States: Hover, Touch (.is-flipped), and Keyboard Focus-within */
.flipcard:hover .flip-inner,
.flipcard:focus-within .flip-inner,
.flipcard.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Vertical Flip Animation */
.flip-dir-vertical .flip-inner {
  transform-origin: center center;
}

.flip-dir-vertical .flip-back {
  transform: rotateX(180deg);
}

.flip-dir-vertical .flipcard:hover .flip-inner,
.flip-dir-vertical .flipcard:focus-within .flip-inner,
.flip-dir-vertical .flipcard.is-flipped .flip-inner {
  transform: rotateX(180deg);
}

/* 3D Zoom Flip Animation */
.flip-dir-zoom .flipcard:hover .flip-inner,
.flip-dir-zoom .flipcard:focus-within .flip-inner,
.flip-dir-zoom .flipcard.is-flipped .flip-inner {
  transform: scale(0.93) rotateY(180deg);
}

/* Unflipped / Forced Front State (when close button is clicked) */
.flipcard.is-unflipped .flip-inner,
.flipcard.is-unflipped:hover .flip-inner,
.flipcard.is-unflipped:focus-within .flip-inner {
  transform: rotateY(0deg) !important;
}

.flip-dir-vertical .flipcard.is-unflipped .flip-inner,
.flip-dir-vertical .flipcard.is-unflipped:hover .flip-inner,
.flip-dir-vertical .flipcard.is-unflipped:focus-within .flip-inner {
  transform: rotateX(0deg) !important;
}

.flip-dir-zoom .flipcard.is-unflipped .flip-inner,
.flip-dir-zoom .flipcard.is-unflipped:hover .flip-inner,
.flip-dir-zoom .flipcard.is-unflipped:focus-within .flip-inner {
  transform: scale(1) rotateY(0deg) !important;
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: 1px solid #dcdcdc;
  -webkit-font-smoothing: antialiased;
}

.flip-back {
  border-color: rgba(255, 255, 255, 0.2);
}

.flip-front picture {
  display: block;
  width: 100%;
  height: 100%;
}

.flip-front img,
.flip-front picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   3D Stylistic Realism & Depth Presets
   ========================================================================== */

/* Preset 1: Apple TV Floating Parallax (Default) */
.depth-style-apple-tv .flipcard,
.flipcard-grid:not([class*="depth-style-"]) .flipcard {
  -webkit-perspective: 1400px;
  perspective: 1400px;
}

/* Preset 2: Ultra Glass & Metallic Rim */
.depth-style-glass-rim .flipcard {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Preset 3: Deep Isometric 3D */
.depth-style-deep-3d .flipcard {
  -webkit-perspective: 900px;
  perspective: 900px;
}

/* Preset 4: Classic Clean 3D */
.depth-style-classic .flipcard {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

/* ==========================================================================
   Drop Shadow & Elevation Styles (Optional)
   ========================================================================== */

/* Style 1: Soft Multi-Layered Ambient (Exact Custom Value) */
.shadow-style-soft-layered .flipcard,
.flipcard-grid:not([class*="shadow-style-"]) .flipcard {
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
    rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
    rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.shadow-style-soft-layered .flipcard:hover,
.flipcard-grid:not([class*="shadow-style-"]) .flipcard:hover {
  box-shadow: rgba(14, 63, 126, 0.1) 0px 0px 0px 1px,
    rgba(42, 51, 70, 0.04) 0px 2px 3px -1px,
    rgba(42, 51, 70, 0.05) 0px 4px 6px -1.5px,
    rgba(42, 51, 70, 0.05) 0px 8px 12px -2px,
    rgba(42, 51, 70, 0.04) 0px 16px 20px -4px,
    rgba(42, 51, 70, 0.04) 0px 24px 28px -6px,
    rgba(42, 51, 70, 0.05) 0px 36px 40px -10px;
}

/* Style 2: Floating Deep Shadow */
.shadow-style-floating .flipcard {
  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.shadow-style-floating .flipcard:hover {
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Style 3: Glass & Metallic Rim */
.shadow-style-glass-rim .flipcard {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.shadow-style-glass-rim .flipcard:hover {
  box-shadow: 0 32px 64px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Style 4: Minimal / Flat (No Outer Shadow) */
.shadow-style-none .flipcard,
.shadow-style-none .flipcard:hover,
.shadow-style-none .flipcard:focus-within,
.shadow-style-none .flip-inner,
.shadow-style-none .flip-front,
.shadow-style-none .flip-back {
  box-shadow: none !important;
}

/* ==========================================================================
   Holographic 3D Floating Layers (translateZ Pop-Out)
   ========================================================================== */

/* Floating Front Caption */
.flipcard-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: clamp(10px, 1.5vw + 4px, 16px) 16px;
  text-align: center;
  box-sizing: border-box;
  z-index: 3;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateZ(35px);
}

.flipcard-title {
  font-family: inherit;
  font-size: clamp(15px, 1.2vw + 10px, 19px);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.25;
  margin: 0;
  display: block;
}

/* Floating Back Button & Content */
.flip-back .flipcard-back-text {
  transform: translateZ(25px);
  margin-bottom: 14px;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

.flipcard-back-text p {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.flipcard-back-text p:last-child {
  margin-bottom: 0;
}

.flipcard-back-text h1,
.flipcard-back-text h2,
.flipcard-back-text h3,
.flipcard-back-text h4,
.flipcard-back-text h5,
.flipcard-back-text h6 {
  color: inherit;
  margin: 0 0 8px 0;
  line-height: 1.25;
  font-weight: 700;
}

.flipcard-back-text h1 {
  font-size: 1.35em;
}

.flipcard-back-text h2 {
  font-size: 1.25em;
}

.flipcard-back-text h3 {
  font-size: 1.15em;
}

.flipcard-back-text h4 {
  font-size: 1.05em;
}

.flipcard-back-text strong,
.flipcard-back-text b {
  font-weight: 700;
}

.flipcard-back-text em,
.flipcard-back-text i {
  font-style: italic;
}

.flipcard-back-text u {
  text-decoration: underline;
}

.flipcard-back-text a {
  color: inherit;
  text-decoration: underline;
}

.flipcard-back-text ul,
.flipcard-back-text ol {
  text-align: left;
  margin: 0 0 8px 16px;
  padding: 0;
}

.flipcard-back-text blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.4);
  margin: 0 0 8px 0;
  padding-left: 8px;
  font-style: italic;
}

.flip-back .btn {
  transform: translateZ(42px);
  backface-visibility: hidden;
}

.flip-back .flipcard-close-btn {
  transform: translateZ(40px);
}

/* ==========================================================================
   Realistic 3D Specular Glare (Soft Ambient Sheen)
   ========================================================================== */

.flipcard-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 6;
  background: radial-gradient(circle 380px at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.12) 35%,
      rgba(255, 255, 255, 0.03) 65%,
      transparent 85%);
  border-radius: inherit;
  mix-blend-mode: overlay;
}

/* Glare visibility on hover / focus */
.flipcard:hover .flipcard-glare,
.flipcard:focus-within .flipcard-glare {
  opacity: 1;
}

/* Disable glare if turned off */
.flipcard-grid:not(.has-glare) .flipcard-glare {
  display: none !important;
}

/* ==========================================================================
   Caption Style Presets
   ========================================================================== */

/* Style 1: Clean White Bar (Exact match to screenshot) */
.caption-style-white-bar .flipcard-caption,
.flipcard-caption.caption-style-white-bar {
  background: #ffffff;
  color: #150578;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
}

/* Style 2: Brand Navy Bar */
.caption-style-dark-bar .flipcard-caption,
.flipcard-caption.caption-style-dark-bar {
  background: #150578;
  color: #ffffff;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
}

/* Style 3: Frosted Glass / Glassmorphism */
.caption-style-glass .flipcard-caption,
.flipcard-caption.caption-style-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #150578;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

/* Style 4: Gradient Fade Overlay */
.caption-style-gradient .flipcard-caption,
.flipcard-caption.caption-style-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  color: #ffffff;
  padding-top: 36px;
}

/* Style 5: Floating Pill Badge */
.caption-style-pill .flipcard-caption,
.flipcard-caption.caption-style-pill {
  background: transparent;
  bottom: 14px;
  padding: 0;
}

.caption-style-pill .flipcard-title,
.flipcard-caption.caption-style-pill .flipcard-title {
  background: #ffffff;
  color: #150578;
  padding: 8px 22px;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: inline-block;
  transform: translateZ(40px);
}

/* Style 6: Minimalist (Text Shadow Overlay) */
.caption-style-minimal .flipcard-caption,
.flipcard-caption.caption-style-minimal {
  background: transparent;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.95);
  bottom: 12px;
}

/* Caption Display Modes */
.caption-display-always .flipcard-caption,
.flipcard-caption.caption-display-always {
  opacity: 1;
  transform: translateZ(35px) translateY(0);
}

.caption-display-hover .flipcard-caption,
.flipcard-caption.caption-display-hover {
  opacity: 0;
  transform: translateZ(35px) translateY(100%);
}

.flipcard:hover .flipcard-caption,
.flipcard:hover .flipcard-caption.caption-display-hover,
.caption-display-hover .flipcard:hover .flipcard-caption,
.flipcard.is-flipped .flipcard-caption {
  opacity: 1;
  transform: translateZ(35px) translateY(0);
}

.caption-display-disabled .flipcard-caption,
.flipcard-caption.caption-display-disabled {
  display: none !important;
}

/* ==========================================================================
   Caption Placement: Under Image (Docked Below Photo)
   ========================================================================== */

.caption-position-under .flip-front,
.modal-flipcard-item.caption-position-under .modal-flip-front {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.caption-position-under .flip-front>img,
.caption-position-under .flip-front>picture,
.modal-flipcard-item.caption-position-under .modal-flip-front>img {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 0 !important;
  display: block !important;
  object-fit: cover !important;
}

.caption-position-under .flip-front>picture {
  display: flex !important;
}

.caption-position-under .flip-front>picture img {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.caption-position-under .flipcard-caption,
.caption-position-under .flipcard:hover .flipcard-caption,
.caption-position-under .flipcard:focus-within .flipcard-caption,
.caption-position-under .flipcard.is-flipped .flipcard-caption,
.modal-flipcard-item.caption-position-under #modal-preview-caption {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  transform: none !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
}

/* Hover transition when positioned under image */
.caption-position-under.caption-display-hover .flipcard-caption,
.caption-position-under .caption-display-hover .flipcard-caption {
  opacity: 0;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.caption-position-under.caption-display-hover .flipcard:hover .flipcard-caption,
.caption-position-under.caption-display-hover .flipcard:focus-within .flipcard-caption,
.caption-position-under .caption-display-hover .flipcard:hover .flipcard-caption,
.caption-position-under .caption-display-hover .flipcard:focus-within .flipcard-caption {
  opacity: 1;
  max-height: 80px;
  padding: clamp(10px, 1.5vw + 4px, 16px) 16px !important;
}

/* Style presets when positioned under image */
.caption-position-under.caption-style-gradient .flipcard-caption,
.caption-position-under .caption-style-gradient .flipcard-caption,
.caption-position-under .flipcard-caption.caption-style-gradient,
.modal-flipcard-item.caption-position-under .flipcard-caption.caption-style-gradient,
.modal-flipcard-item.caption-position-under #modal-preview-caption.caption-style-gradient {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  padding-top: clamp(10px, 1.5vw + 4px, 16px) !important;
}

.caption-position-under.caption-style-pill .flipcard-caption,
.caption-position-under .caption-style-pill .flipcard-caption,
.caption-position-under .flipcard-caption.caption-style-pill,
.modal-flipcard-item.caption-position-under .flipcard-caption.caption-style-pill,
.modal-flipcard-item.caption-position-under #modal-preview-caption.caption-style-pill {
  background: #f1f5f9 !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.caption-position-under.caption-style-minimal .flipcard-caption,
.caption-position-under .caption-style-minimal .flipcard-caption,
.caption-position-under .flipcard-caption.caption-style-minimal,
.modal-flipcard-item.caption-position-under .flipcard-caption.caption-style-minimal,
.modal-flipcard-item.caption-position-under #modal-preview-caption.caption-style-minimal {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.5vw + 4px, 16px) 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Under Image: Uncropped Photo Sizing
   The card is sized as "photo area (at the photo's own aspect ratio) + title
   bar", instead of the bar being carved out of a fixed-ratio card. The photo
   box therefore matches the supplied image exactly and nothing is cropped.

   Supply images at:
     standard card ....... 800 x 480    (--fc-photo-ratio)
     2-column wide card .. 1600 x 472   (--fc-photo-ratio-wide)
     2-row tall card ..... 800 x 1080   (row driven, see below)
     mobile .............. 410 x 230    (--fc-photo-ratio, mobile block)
   ========================================================================== */

.caption-position-under {
  --fc-photo-ratio: 800 / 480;
  --fc-photo-ratio-wide: 1600 / 472;
  --fc-photo-ratio-tall: 800 / 1080;
  --fc-bar-h: 56px;
  --fc-photo-fit: cover;
  --fc-photo-bg: #ffffff;
}

/* Card height = photo area + title bar */
.caption-position-under .flipcard {
  aspect-ratio: auto !important;
  height: auto !important;
  padding-bottom: var(--fc-bar-h) !important;
  box-sizing: border-box !important;
}

.caption-position-under .flipcard::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: var(--fc-photo-ratio);
}

/* Both faces cover the padding box, so the bar sits in the reserved strip */
.caption-position-under .flip-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
}

/* Wide cards (2 columns): photo is twice as wide, same height as its row */
.caption-position-under:not([class*="layout-"]) .item-4::before,
.caption-position-under.layout-1 .item-4::before,
.caption-position-under.layout-2 .item-4::before,
.caption-position-under.layout-3 .item-1::before,
.caption-position-under.layout-3 .item-4::before,
.caption-position-under.layout-5 .item-1::before,
.caption-position-under.layout-5 .item-2::before,
.caption-position-under.layout-6 .item-2::before,
.caption-position-under.layout-6 .item-5::before {
  aspect-ratio: var(--fc-photo-ratio-wide);
}

/* Tall cards (2 rows): height comes from the two rows they span */
.caption-position-under:not([class*="layout-"]) .item-1,
.caption-position-under.layout-1 .item-1,
.caption-position-under.layout-2 .item-6,
.caption-position-under.layout-4 .item-1,
.caption-position-under.layout-4 .item-6 {
  height: 100% !important;
}

.caption-position-under:not([class*="layout-"]) .item-1::before,
.caption-position-under.layout-1 .item-1::before,
.caption-position-under.layout-2 .item-6::before,
.caption-position-under.layout-4 .item-1::before,
.caption-position-under.layout-4 .item-6::before {
  content: none;
}

/* Title bar occupies exactly the reserved strip */
.caption-position-under .flipcard-caption,
.caption-position-under .flipcard:hover .flipcard-caption,
.caption-position-under .flipcard:focus-within .flipcard-caption,
.caption-position-under .flipcard.is-flipped .flipcard-caption {
  height: var(--fc-bar-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* Card without title bar in "Under Image" mode: intentionally NOT resized.
   It keeps the exact same photo-ratio + --fc-bar-h box as a card with a bar,
   so cards stay the same height whether they're mixed in the same row/section
   or not. The bar's ::before + padding-bottom is unchanged; since no
   .flipcard-caption sibling is rendered, the flex img (flex:1 1 0%, see
   below) simply grows to cover that freed strip too - no resize, no gap. */

/* Photos fill their box by default (--fc-photo-fit: cover). A card set to
   "Fit whole image" overrides the variable to contain, which never crops and
   shows --fc-photo-bg where the source ratio does not match the box. */
.caption-position-under .flip-front {
  background: var(--fc-photo-bg);
}

.caption-position-under .flip-front>img,
.caption-position-under .flip-front>picture>img,
.modal-flipcard-item.caption-position-under .modal-flip-front>img {
  object-fit: var(--fc-photo-fit, cover) !important;
}

/* ==========================================================================
   Back Side Content & Buttons
   ========================================================================== */

.flip-back {
  transform: rotateY(180deg);
  background: #001286;
  color: #fff;
  padding: clamp(14px, 2.5vw, 26px);
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.flipcard-close-btn {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 15;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  transform: translateZ(40px);
  padding: 0;
}

.flipcard-close-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  transform: translateZ(48px) scale(1.1);
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  cursor: pointer;
  box-sizing: border-box;
}

/* Button 1: Solid Fill */
.btn-solid {
  background: #ffffff;
  color: #150578;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.btn-solid:hover {
  background: #f0f4f8;
  transform: translateZ(48px) scale(1.04);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  color: #150578;
}

/* Button 2: Ghost Outline */
.btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
}

.btn-outline:hover {
  background: #ffffff;
  color: #150578;
  transform: translateZ(48px) scale(1.04);
}

/* Button 3: Rounded Pill */
.btn-pill {
  background: #ffffff;
  color: #150578;
  border-radius: 50px;
  padding: 10px 26px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.btn-pill:hover {
  background: #f0f4f8;
  transform: translateZ(48px) scale(1.06);
  color: #150578;
}

/* Button 4: Minimal Link with Animated Arrow */
.btn-link-arrow {
  background: transparent;
  color: #ffffff;
  padding: 8px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-link-arrow .btn-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.btn-link-arrow:hover {
  border-bottom-color: #ffffff;
}

.btn-link-arrow:hover .btn-arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet devices - 2 columns */
@media (min-width: 769px) and (max-width: 991px) {
  .flipcard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
  }

  /* Layout 7 keeps its uniform grid, two per row on tablet */
  .flipcard-grid.layout-7 {
    grid-template-columns: repeat(2, 1fr);
  }

  .flipcard-section {
    display: contents;
  }

  .flipcard-grid .item-1,
  .flipcard-grid .item-2,
  .flipcard-grid .item-3,
  .flipcard-grid .item-4,
  .flipcard-grid .item-5,
  .flipcard-grid .item-6 {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 455 / 250;
    height: auto;
  }

  .flipcard-grid:not([class*="layout-"]) .item-1,
  .flipcard-grid.layout-1 .item-1,
  .flipcard-grid.layout-2 .item-6,
  .flipcard-grid.layout-4 .item-1,
  .flipcard-grid.layout-4 .item-6 {
    aspect-ratio: 455 / 515;
    height: auto;
  }

  .flipcard-grid:not([class*="layout-"]) .item-4,
  .flipcard-grid.layout-1 .item-4,
  .flipcard-grid.layout-2 .item-4,
  .flipcard-grid.layout-3 .item-1,
  .flipcard-grid.layout-3 .item-4,
  .flipcard-grid.layout-5 .item-1,
  .flipcard-grid.layout-5 .item-2,
  .flipcard-grid.layout-6 .item-2,
  .flipcard-grid.layout-6 .item-5 {
    grid-column: span 2;
    aspect-ratio: 925 / 250;
    height: auto;
  }
}

/* Mobile Layout - Split into 2 Sections of 3 cards each */
@media(max-width: 768px) {

  .flipcard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--fc-mobile-section-gap, 15px);
    padding-top: var(--fc-mobile-pad-top, 0px);
    padding-right: var(--fc-mobile-pad-right, 10px);
    padding-bottom: var(--fc-mobile-pad-bottom, 0px);
    padding-left: var(--fc-mobile-pad-left, 10px);
    margin-top: var(--fc-mobile-mar-top, 0px);
    margin-right: var(--fc-mobile-mar-right, 0px);
    margin-bottom: var(--fc-mobile-mar-bottom, 0px);
    margin-left: var(--fc-mobile-mar-left, 0px);
    width: 100%;
    box-sizing: border-box;
  }

  .flipcard-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--fc-mobile-card-gap, 15px);
    width: 100%;
    min-height: var(--fc-mobile-section-min-height, 100vh);
    min-height: var(--fc-mobile-section-min-svh, 100svh);
    min-height: var(--fc-mobile-section-min-dvh, 100dvh);
    height: var(--fc-mobile-section-min-height, 100vh);
    height: var(--fc-mobile-section-min-svh, 100svh);
    height: var(--fc-mobile-section-min-dvh, 100dvh);
    box-sizing: border-box;
    overflow: hidden;
    justify-content: center;
    contain: layout;
  }

  .flipcard-section-1 {
    padding-top: var(--fc-mobile-s1-pad-top, 0px);
    padding-right: var(--fc-mobile-s1-pad-right, 0px);
    padding-bottom: var(--fc-mobile-s1-pad-bottom, 0px);
    padding-left: var(--fc-mobile-s1-pad-left, 0px);
    margin-top: var(--fc-mobile-s1-mar-top, 0px);
    margin-right: var(--fc-mobile-s1-mar-right, 0px);
    margin-bottom: var(--fc-mobile-s1-mar-bottom, 0px);
    margin-left: var(--fc-mobile-s1-mar-left, 0px);
    overflow: visible;
  }

  .flipcard-section-2 {
    padding-top: var(--fc-mobile-s2-pad-top, 0px);
    padding-right: var(--fc-mobile-s2-pad-right, 0px);
    padding-bottom: var(--fc-mobile-s2-pad-bottom, 0px);
    padding-left: var(--fc-mobile-s2-pad-left, 0px);
    margin-top: var(--fc-mobile-s2-mar-top, 0px);
    margin-right: var(--fc-mobile-s2-mar-right, 0px);
    margin-bottom: var(--fc-mobile-s2-mar-bottom, 0px);
    margin-left: var(--fc-mobile-s2-mar-left, 0px);
    overflow: visible;
  }

  .flipcard-section[style*="--fc-mobile-section-min-height: auto"],
  .flipcard-grid[style*="--fc-mobile-section-min-height: auto"] .flipcard-section {
    grid-template-rows: auto;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .flipcard-grid .flipcard,
  .flipcard-grid[class*="layout-"] .flipcard,
  .flipcard-grid .item-1,
  .flipcard-grid .item-2,
  .flipcard-grid .item-3,
  .flipcard-grid .item-4,
  .flipcard-grid .item-5,
  .flipcard-grid .item-6,
  .flipcard-grid[class*="layout-"] .item-1,
  .flipcard-grid[class*="layout-"] .item-2,
  .flipcard-grid[class*="layout-"] .item-3,
  .flipcard-grid[class*="layout-"] .item-4,
  .flipcard-grid[class*="layout-"] .item-5,
  .flipcard-grid[class*="layout-"] .item-6 {
    grid-column: 1 !important;
    grid-row: auto !important;
    /* The row is the only thing that sets the card height here: the card stretches
       into it (height: auto + the default stretch alignment) instead of asking for
       a percentage of it. A percentage height next to an aspect-ratio is not
       resolved reliably on a grid item in iOS Safari - it falls back to the ratio,
       every card comes out taller than its row and the cards stack on top of each
       other. min-height/min-width: 0 stop the automatic minimum size from pushing
       the track out the same way. */
    aspect-ratio: auto !important;
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 96% !important;
    max-width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .flipcard-section[style*="--fc-mobile-section-min-height: auto"] .flipcard,
  .flipcard-grid[style*="--fc-mobile-section-min-height: auto"] .flipcard {
    aspect-ratio: 410 / 270 !important;
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
    width: 96% !important;
    max-width: 96% !important;
  }

  .flipcard-caption {
    padding: 10px 14px;
  }
}

/* Mobile phones - Single Column Spacing & typography */
@media(max-width: 600px) {
  .flip-back {
    padding: 14px;
    font-size: 14px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Extra small devices */
@media(max-width: 400px) {
  .flip-back {
    padding: 12px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Under Image: Uncropped Photo Sizing - Responsive
   ========================================================================== */

/* Tablet: tall cards stop spanning rows, so they size from a portrait photo */
@media (min-width: 769px) and (max-width: 991px) {

  .flipcard-grid.caption-position-under:not([class*="layout-"]) .item-1,
  .flipcard-grid.caption-position-under.layout-1 .item-1,
  .flipcard-grid.caption-position-under.layout-2 .item-6,
  .flipcard-grid.caption-position-under.layout-4 .item-1,
  .flipcard-grid.caption-position-under.layout-4 .item-6 {
    height: auto !important;
  }

  .flipcard-grid.caption-position-under:not([class*="layout-"]) .item-1::before,
  .flipcard-grid.caption-position-under.layout-1 .item-1::before,
  .flipcard-grid.caption-position-under.layout-2 .item-6::before,
  .flipcard-grid.caption-position-under.layout-4 .item-1::before,
  .flipcard-grid.caption-position-under.layout-4 .item-6::before {
    content: '';
    aspect-ratio: var(--fc-photo-ratio-tall);
  }
}

/* Mobile: every card is the same box - photo at 410:230 plus the title bar */
@media (max-width: 768px) {

  .flipcard-grid.caption-position-under {
    --fc-photo-ratio: 410 / 230;
    --fc-photo-ratio-wide: 410 / 230;
    --fc-photo-ratio-tall: 410 / 230;
    --fc-bar-h: 40px;
  }

  .flipcard-grid.caption-position-under .flipcard,
  .flipcard-grid.caption-position-under[class*="layout-"] .flipcard {
    /* The row gives the card its height (stretch - no percentage of the row, so
       there is nothing here a browser can fail to resolve), and the width is then
       whatever the photo needs at --fc-photo-ratio. Photo box and photo therefore
       have the same shape and nothing is cropped on any side. The bottom
       --fc-bar-h of the card is reserved for the title bar by the padding.

       The ratio sits on the ::before sizer rather than on the card itself on
       purpose: an aspect-ratio on a grid item stops iOS Safari from stretching it
       into its row, which is what used to make the cards overlap. min-width keeps
       a card on screen if the sizer ever comes out at zero. */
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    justify-self: center !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: auto !important;
    min-width: 40% !important;
    max-width: 96% !important;
    padding-bottom: var(--fc-bar-h) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .flipcard-grid.caption-position-under .flipcard::before,
  .flipcard-grid.caption-position-under[class*="layout-"] .flipcard::before {
    content: '' !important;
    display: block !important;
    height: 100% !important;
    width: auto !important;
    aspect-ratio: var(--fc-photo-ratio) !important;
  }

  /* Sections set to auto height: the photo drives the card height instead */
  .flipcard-grid.caption-position-under .flipcard-section[style*="--fc-mobile-section-min-height: auto"] .flipcard,
  .flipcard-grid.caption-position-under[style*="--fc-mobile-section-min-height: auto"] .flipcard {
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    align-self: start !important;
    width: 96% !important;
    max-width: 96% !important;
    height: auto !important;
    max-height: none !important;
  }

  .flipcard-grid.caption-position-under .flipcard-section[style*="--fc-mobile-section-min-height: auto"] .flipcard::before,
  .flipcard-grid.caption-position-under[style*="--fc-mobile-section-min-height: auto"] .flipcard::before {
    content: '' !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: var(--fc-photo-ratio) !important;
  }

  /* Cards with no title bar on mobile: intentionally NOT resized - same
     photo-ratio + --fc-bar-h box as a card with a bar, so mixed cards in the
     same section stay the same height. The flex img covers the freed strip. */
}

/* ==========================================================================
   Section Height Mode - Desktop
   "Full screen" makes the whole grid one viewport-tall section (both rows
   share the height), instead of the cards sizing themselves from their
   photo ratio. Mobile has the same switch per 3-card section.
   ========================================================================== */

@media (min-width: 992px) {

  .flipcard-grid.desktop-height-fill {
    height: 100vh;
    height: 100dvh;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    box-sizing: border-box;
  }

  .flipcard-grid.desktop-height-fill .flipcard {
    aspect-ratio: auto !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  /* The rows drive the height here, so the photo sizer is not needed */
  .flipcard-grid.desktop-height-fill.caption-position-under .flipcard::before {
    content: none;
  }
}