/* Designed collages (admin/collage.php → hf_render() in includes/layout.php, and the designer's own canvas).
   Everything is sized in cqw (1% of the collage's width), so a collage looks the same small or large. */
.hf { position: relative; width: 100%; aspect-ratio: 400 / 260; border-radius: 12px; overflow: hidden; container-type: inline-size; isolation: isolate; }
.hf-bg-none { background: transparent; }
.hf-bg-ivory { background: #F7F3EA; }
.hf-bg-sand { background: linear-gradient(160deg, #EFE4CF, #E2D2B4); }
.hf-bg-navy { background: linear-gradient(160deg, #123456, #0B2742 55%, #061629); }
.hf-bg-gold { background: linear-gradient(135deg, #F7DA72, #D9A93A 55%, #B8862B); }
.hf-bg-blur { background: #0B2742; }
.hf-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(3cqw) brightness(.7) saturate(1.2); z-index: 0; }

.hf-it { position: absolute; box-sizing: border-box; transform: rotate(var(--r, 0deg)); transform-origin: 50% 50%; display: flex; flex-direction: column; }
.hf-ph { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hf .hf-it .hf-ph > img, .hs-slide .hf-it .hf-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
  object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--z, 1)); transition: none; }
.hf-it.is-flip .hf-ph > img { transform: scale(var(--z, 1)) scaleX(-1) !important; }

/* frames */
.fr-thin { background: #fff; padding: .6cqw; }
.fr-thick { background: #fff; padding: 1.6cqw; }
.fr-polaroid { background: #fffdf8; padding: 1.4cqw 1.4cqw 0; }
.fr-polaroid::after { content: ''; display: block; flex: 0 0 6.5cqw; }
.fr-gold { background: linear-gradient(135deg, #F7DA72, #C9952F 50%, #F3D27A); padding: .9cqw; }
.fr-navy { background: #0B2742; padding: .9cqw; }

/* shapes (the frame and the photo both) */
.shp-square, .shp-square .hf-ph { border-radius: 0; }
.shp-round { border-radius: 1.4cqw; } .shp-round .hf-ph { border-radius: 1cqw; }
.shp-soft { border-radius: 4cqw; } .shp-soft .hf-ph { border-radius: 3.4cqw; }
.shp-circle, .shp-circle .hf-ph { border-radius: 50%; }
.shp-arch { border-radius: 50% 50% 1.4cqw 1.4cqw / 34% 34% 1.4cqw 1.4cqw; } .shp-arch .hf-ph { border-radius: 50% 50% 1cqw 1cqw / 34% 34% 1cqw 1cqw; }
.fr-polaroid.shp-circle, .fr-polaroid.shp-arch { border-radius: 1cqw; } /* (a polaroid keeps its card) */

/* shadows */
.sh-none { box-shadow: none; }
.sh-soft { box-shadow: 0 .8cqw 2.4cqw rgba(6, 22, 41, .28); }
.sh-deep { box-shadow: 0 1.6cqw 4.4cqw rgba(6, 22, 41, .5), 0 .3cqw .8cqw rgba(6, 22, 41, .3); }
.sh-lifted { box-shadow: 0 3.6cqw 3.2cqw -2cqw rgba(6, 22, 41, .55), 0 .4cqw 1cqw rgba(6, 22, 41, .18); }
.sh-glow { box-shadow: 0 0 0 .25cqw rgba(247, 218, 114, .55), 0 0 4cqw rgba(247, 218, 114, .5); }
.fr-none.sh-soft, .fr-none.sh-deep, .fr-none.sh-lifted, .fr-none.sh-glow { background: transparent; }

/* colour filters */
.fl-warm .hf-ph > img { filter: sepia(.22) saturate(1.2) brightness(1.03); }
.fl-cool .hf-ph > img { filter: hue-rotate(-8deg) saturate(.92) brightness(1.04) contrast(1.02); }
.fl-vivid .hf-ph > img { filter: saturate(1.45) contrast(1.08); }
.fl-faded .hf-ph > img { filter: contrast(.84) brightness(1.1) saturate(.75); }
.fl-bw .hf-ph > img { filter: grayscale(1) contrast(1.06); }

/* the label: a gold chip on the photo — or handwritten on a polaroid's card */
.hf-tag { position: absolute; left: 2.2cqw; bottom: 2.2cqw; z-index: 1; padding: .5cqw 1.3cqw; border-radius: 99px; background: linear-gradient(135deg, #F7DA72, #D9A93A); color: #0B2742;
  font: 700 1.7cqw/1.2 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 4.4cqw); overflow: hidden; text-overflow: ellipsis; }
.fr-polaroid .hf-tag { left: 0; right: 0; bottom: 0; height: 6.5cqw; display: flex; align-items: center; justify-content: center; padding: 0 1cqw; background: none; border-radius: 0; max-width: none;
  font: 600 3.2cqw/1 Caveat, 'Segoe Print', 'Bradley Hand', cursive; letter-spacing: 0; text-transform: none; color: #22303f; }
.shp-circle:not(.fr-polaroid) .hf-tag, .shp-arch:not(.fr-polaroid) .hf-tag { left: 50%; transform: translateX(-50%); bottom: 6%; }

/* inside the home page's slideshow */
.hs-collages .hs-slide .hf { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }