/* ==========================================================================
   PHOTOGRAPHER — premium cinematic photography card.

   Loaded by CardRenderer only for templates whose `key` is "photographer"
   (public/assets/css/templates/<key>.css). Every selector is scoped to
   .pf-photo or body.pf-tpl-photographer — nothing here reaches another
   template. The card renders complete and readable with CSS alone; the
   shell's GSAP hooks only ADD motion, and every decorative layer is
   aria-hidden + pointer-events:none so it can never sit between a visitor
   and a real control.

   All content comes from the card's own data. Slots with no data simply do
   not render (see render.php) — nothing here fabricates content.
   ========================================================================== */

.pf-photo {
    --ph-gold: var(--c-accent2);
    --ph-hair: color-mix(in srgb, var(--ph-gold) 30%, transparent);
    --ph-panel: color-mix(in srgb, var(--c-text) 6%, var(--c-bg));
    --ph-panel2: color-mix(in srgb, var(--c-text) 10%, var(--c-bg));
    --ph-gut: 20px;
    max-width: 660px;
    position: relative;
    isolation: isolate;
    /* decoration guard: nothing decorative may widen the page */
    overflow-x: clip;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
@media (min-width: 600px) { .pf-photo { --ph-gut: 34px; } }

/* ambient studio wash behind the whole card — the template's own decorative
   photo, dimmed into the page background so it reads as atmosphere. Negative
   stack level: it can never paint over real content. */
.pf-photo-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 82%, transparent) 24%, color-mix(in srgb, var(--c-bg) 62%, transparent) 100%),
        url('/assets/img/templates/photographer-cover.jpg');
    background-size: 100% 100%, cover;
    background-position: center, center 30%;
    background-repeat: no-repeat;
    background-attachment: local, fixed;
}

/* ---------- app bar ---------- */
.pf-photo-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-inline: calc(var(--ph-gut) * -1); padding: 10px var(--ph-gut) 12px;
    position: relative; z-index: 6;
}
.pf-photo-top__brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: .92rem; color: inherit; text-decoration: none;
}
.pf-photo-top__mark {
    width: 22px; height: 22px; border-radius: 7px; flex: none;
    background: linear-gradient(140deg, var(--c-primary), var(--ph-gold));
    display: grid; place-items: center;
}
.pf-photo-top__mark svg { width: 13px; height: 13px; color: var(--c-btn-text); }
.pf-photo-menu { position: relative; margin-inline-start: auto; }
.pf-photo-menu > summary {
    list-style: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center;
    border: 1px solid var(--pf-line); background: var(--ph-panel); color: inherit;
}
.pf-photo-menu > summary::-webkit-details-marker { display: none; }
.pf-photo-menu > summary svg { width: 17px; height: 17px; }
.pf-photo-menu[open] > summary { border-color: var(--ph-hair); color: var(--ph-gold); }
.pf-photo-menu__panel {
    position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 8px);
    min-width: 190px; max-width: 72vw; padding: 6px; margin: 0;
    background: var(--ph-panel2); border: 1px solid var(--pf-line);
    border-radius: 14px; box-shadow: 0 24px 50px -22px rgba(0,0,0,.75);
    list-style: none;
}
.pf-photo-menu__panel a {
    display: block; padding: 9px 12px; border-radius: 9px;
    color: inherit; text-decoration: none; font-size: .88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-photo-menu__panel a:hover,
.pf-photo-menu__panel a:focus-visible { background: color-mix(in srgb, var(--ph-gold) 14%, transparent); color: var(--ph-gold); }

/* ---------- hero ---------- */
.pf-photo-hero {
    position: relative; overflow: hidden;
    margin-inline: calc(var(--ph-gut) * -1);
}
.pf-photo-hero__img { position: relative; display: block; }
.pf-photo-hero__img img {
    width: 100%; height: clamp(300px, 54vh, 460px); object-fit: cover; display: block;
    animation: pf-cover-in 1100ms var(--pf-ease) both;
}
/* the photo dissolves into the page so the identity block can sit ON it */
.pf-photo-hero__img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 26%,
        color-mix(in srgb, var(--c-bg) 40%, transparent) 60%,
        color-mix(in srgb, var(--c-bg) 88%, transparent) 84%,
        var(--c-bg) 100%);
}
/* fine cinematic grain */
.pf-photo-hero__grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
/* no cover of their own — a real lens photo sets the mood instead of a blank field */
.pf-photo--plain .pf-photo-hero {
    height: clamp(230px, 40vh, 320px);
    background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--c-primary) 24%, transparent), transparent 72%);
}
.pf-photo-hero__lens {
    position: absolute; z-index: 2; inset-block-start: 0; inset-inline-end: 0;
    width: min(58%, 250px); aspect-ratio: 1/1; pointer-events: none;
    opacity: .7; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 45%, transparent 78%);
            mask-image: radial-gradient(circle at 100% 0%, #000 45%, transparent 78%);
}
.pf-photo-hero__lens img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* viewfinder focus brackets */
.pf-photo-hero__frame {
    position: absolute; z-index: 3; inset: 14px; pointer-events: none;
    background-image:
        linear-gradient(var(--ph-hair), transparent),
        linear-gradient(90deg, var(--ph-hair), transparent);
    background-repeat: no-repeat;
    background-size: 2px 20px, 20px 2px;
    background-position: left top, left top;
}
.pf-photo-hero__frame::before, .pf-photo-hero__frame::after {
    content: ""; position: absolute; width: 20px; height: 20px;
    border: 2px solid var(--ph-hair);
}
.pf-photo-hero__frame::before { top: 0; inset-inline-end: 0; border-inline-start: 0; border-block-end: 0; }
.pf-photo-hero__frame::after  { bottom: 0; inset-inline-start: 0; border-inline-end: 0; border-block-start: 0; }

/* 35mm perforation edge, drawn in CSS — crisp at any size, no imagery */
.pf-photo-perf {
    position: absolute; z-index: 3; top: 0; bottom: 0; inset-inline-end: 0;
    width: 13px; pointer-events: none; opacity: .45;
    background: var(--ph-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='24'%3E%3Crect x='2.5' y='5' width='8' height='14' rx='2.4' fill='%23000'/%3E%3C/svg%3E") repeat-y center;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='24'%3E%3Crect x='2.5' y='5' width='8' height='14' rx='2.4' fill='%23000'/%3E%3C/svg%3E") repeat-y center;
}


/* editorial label over the hero — the card's own company field */
.pf-photo-hero__label {
    position: absolute; z-index: 4; inset-inline-start: var(--ph-gut); bottom: 132px;
    margin: 0; padding-inline-start: 12px; max-width: min(62%, 260px);
    font-size: .68rem; font-weight: 600; line-height: 1.5;
    text-transform: uppercase; letter-spacing: .2em;
    color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.75);
}
.pf-photo-hero__label::before {
    content: ""; position: absolute; inset-block: 2px 2px; inset-inline-start: 0; width: 2px;
    background: linear-gradient(180deg, var(--ph-gold), transparent);
}

/* ---------- identity ---------- */
.pf-photo-hero__id {
    position: relative; z-index: 5;
    display: flex; align-items: flex-end; gap: 15px;
    padding-inline: var(--ph-gut);
}
.pf-photo--cover .pf-photo-hero__id { margin-top: -112px; }
.pf-photo--plain .pf-photo-hero__id { margin-top: -52px; }
.pf-photo-hero__id .pf-avatar--ring {
    width: 100px; height: 100px; flex: none; margin: 0; border-width: 3px;
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.8), 0 0 0 6px color-mix(in srgb, var(--c-bg) 55%, transparent);
}
@media (min-width: 420px) { .pf-photo-hero__id .pf-avatar--ring { width: 112px; height: 112px; } }
.pf-photo-hero__text { min-width: 0; padding-bottom: 6px; text-align: start; }
.pf-photo .pf-name--display {
    font-family: var(--pf-display); text-align: start; margin: 0;
    font-size: clamp(1.45rem, 6.4vw, 2.05rem); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.06;
}
.pf-photo-role {
    margin: 5px 0 0; color: var(--ph-gold);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
}
.pf-photo-meta {
    margin: 5px 0 0; font-size: .7rem; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; opacity: .68;
}
.pf-photo-meta .pf-dot { margin: 0 7px; opacity: .6; }
.pf-photo--cover .pf-name--display { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.75); }
.pf-photo--cover .pf-photo-meta { color: #fff; opacity: .8; text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* specialities — the card's own service titles, never invented */
.pf-photo-tags {
    list-style: none; display: flex; flex-wrap: nowrap; align-items: center;
    margin: 14px 0 0; padding-inline: var(--ph-gut);
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
    font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; opacity: .62;
}
.pf-photo-tags::-webkit-scrollbar { display: none; }
.pf-photo-tags li { flex: none; white-space: nowrap; }
.pf-photo-tags li + li::before { content: "\2022"; margin: 0 8px; color: var(--ph-gold); opacity: .85; }

/* ---------- primary action ---------- */
.pf-photo .pf-cta-row--photo { display: block; margin: 20px var(--ph-gut) 0; }
.pf-photo .pf-cta-row--photo .pf-cta {
    width: 100%; padding: 15px 20px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
}
.pf-photo .pf-cta-row--photo .pf-cta--primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ph-gold) 78%, var(--c-primary)), var(--ph-gold));
    color: #17120a; border-color: transparent;
    box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--ph-gold) 85%, transparent);
}
.pf-photo .pf-cta-row--photo .pf-cta__ic { width: 18px; height: 18px; flex: none; }

/* ---------- contact + social icon rows ---------- */
.pf-photo-quick {
    list-style: none; margin: 18px 0 0; padding-inline: var(--ph-gut);
    display: flex; justify-content: center; gap: 6px;
}
.pf-photo-quick li { flex: 1 1 0; min-width: 0; max-width: 100px; }
.pf-photo-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.pf-photo-quick__ic {
    width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ph-panel2); border: 1px solid var(--pf-line); color: inherit;
    transition: transform .18s var(--pf-spring), border-color .18s ease, color .18s ease;
}
.pf-photo-quick a:hover .pf-photo-quick__ic,
.pf-photo-quick a:focus-visible .pf-photo-quick__ic { transform: translateY(-2px); border-color: var(--ph-hair); color: var(--ph-gold); }
.pf-photo-quick__ic svg { width: 19px; height: 19px; }
.pf-photo-quick__lb { font-size: .64rem; font-weight: 600; letter-spacing: .05em; opacity: .66; text-align: center; }

.pf-photo .pf-social--cre { margin-top: 16px; gap: 8px; }
.pf-photo .pf-social--cre a { width: 44px; height: 44px; border-radius: 50%; background: var(--ph-panel2); }
.pf-photo .pf-social--cre svg { width: 17px; height: 17px; }

/* ---------- bio as an editorial pull-quote ---------- */
.pf-photo-pull {
    position: relative; overflow: hidden; margin: 28px calc(var(--ph-gut) * -1) 0;
    padding: 26px var(--ph-gut) 30px calc(var(--ph-gut) + 22px);
    border-block: 1px solid var(--pf-line);
}
.pf-photo-pull__art {
    position: absolute; z-index: 0; inset-block: -20% -20%; inset-inline-end: -12%;
    width: min(52%, 250px); pointer-events: none;
    opacity: .45; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 38%, transparent 74%);
            mask-image: radial-gradient(circle at 70% 50%, #000 38%, transparent 74%);
}
.pf-photo-pull__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-photo-pull blockquote {
    position: relative; z-index: 1; margin: 0; max-width: 26ch;
    font-family: var(--pf-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.05rem, 4.6vw, 1.35rem); line-height: 1.45;
}
.pf-photo-pull blockquote::before {
    content: "\201C"; position: absolute; inset-inline-start: -20px; top: -14px;
    font-size: 2.6rem; line-height: 1; color: var(--ph-gold); opacity: .55;
}
.pf-photo-pull::after {
    content: ""; position: absolute; inset-inline-start: var(--ph-gut); bottom: 16px;
    width: 42px; height: 2px; background: var(--ph-gold); opacity: .7;
}

/* ---------- section headings: icon badge + left-aligned title ---------- */
.pf-photo .pf-sec { margin-top: 34px; }
.pf-photo .pf-sec h2 {
    --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3' stroke-linecap='round'/%3E%3C/svg%3E");
    position: relative; display: flex; align-items: center; gap: 0;
    padding-inline-start: 46px; min-height: 34px;
    justify-content: flex-start; text-align: start;
    text-transform: none; letter-spacing: -.01em; opacity: 1;
    font-size: 1.06rem; font-weight: 700;
}
.pf-photo .pf-sec h2::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, var(--ph-gold) 15%, var(--ph-panel));
    border: 1px solid var(--ph-hair);
    -webkit-mask: none; mask: none;
}
.pf-photo .pf-sec h2::after {
    content: ""; position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; background: var(--ph-gold); display: block;
    -webkit-mask: var(--ph-icon) center/contain no-repeat;
            mask: var(--ph-icon) center/contain no-repeat;
}
.pf-photo .pf-sec--text h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c1-4 4-6 7-6s6 2 7 6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-cards) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='6' width='17' height='13' rx='2'/%3E%3Cpath d='M9 6l1.4-2.2h3.2L15 6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.5' r='3.4'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-gallery) h2,
.pf-photo .pf-sec:has(> .pf-portfolio) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.8'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='M4 17l5-5 3 3 4-4 4 4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-quotes) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.4 5.9.6-4.4 4 1.3 5.9L12 16l-5.4 3.1 1.3-5.9-4.4-4 5.9-.6L12 3.2Z'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-hours) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-embed) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10 8.7l6 3.3-6 3.3v-6.6Z' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pf-photo .pf-sec:has(> .pf-loc) h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.3-7-11.5A7 7 0 0 1 19 9.5C19 14.7 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.3' r='2.4'/%3E%3C/svg%3E"); }
.pf-photo .pf-contact h2 { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.8'/%3E%3Cpath d='M4 6.5l8 6.4 8-6.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- about ---------- */
.pf-photo .pf-sec--text {
    background: var(--ph-panel); border: 1px solid var(--pf-line); border-radius: 18px;
    padding: 18px 20px 20px;
}
.pf-photo .pf-sec--text .pf-prose { margin-top: 12px; opacity: .84; }

/* ---------- gallery: a contact sheet that never crops ----------
   Column flow, so every photo keeps its own aspect ratio and is shown whole;
   tapping one opens it full size in the lightbox. */
.pf-photo .pf-gallery {
    display: block; column-count: 2; column-gap: 6px;
    margin: 16px calc(var(--ph-gut) * -1) 0; counter-reset: pf-frame;
}
@media (min-width: 600px) { .pf-photo .pf-gallery { column-count: 3; } }
.pf-photo .pf-gallery__cell {
    position: relative; display: block; margin: 0 0 6px; padding: 0;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    overflow: hidden; cursor: zoom-in; background: var(--ph-panel);
}
.pf-photo .pf-gallery__cell:focus-visible { outline: 2px solid var(--ph-gold); outline-offset: -2px; }
.pf-photo .pf-gallery img {
    position: static; display: block; width: 100%; height: auto;
    object-fit: fill; aspect-ratio: auto; border: 0; border-radius: 0;
    transition: transform .5s var(--pf-ease), filter .3s ease;
}
.pf-photo .pf-gallery__cell:hover img { transform: scale(1.03); filter: brightness(1.06); }
.pf-photo .pf-gallery__cell::before {
    counter-increment: pf-frame; content: counter(pf-frame, decimal-leading-zero);
    position: absolute; z-index: 2; bottom: 9px; inset-inline-start: 11px;
    font-family: var(--pf-display); font-size: .7rem; letter-spacing: .1em; font-weight: 600;
    color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); pointer-events: none;
}
.pf-photo .pf-gallery__cell::after {
    content: ""; position: absolute; z-index: 2; bottom: 5px; inset-inline-start: 11px;
    width: 16px; height: 2px; background: var(--ph-gold); pointer-events: none;
}

/* ---------- selected projects ---------- */
.pf-photo .pf-portfolio { gap: 6px; }
.pf-photo .pf-work { background: transparent; border: 0; border-radius: 0; }
.pf-photo .pf-work__media { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; }
.pf-photo .pf-work__body { padding: 12px 2px 4px; }
.pf-photo .pf-work__body h3 { font-family: var(--pf-display); font-weight: 600; }
.pf-photo .pf-work__body p { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; opacity: .6; }

/* ---------- services / packages: the item's own photo leads ---------- */
.pf-photo .pf-cards {
    display: flex; gap: 10px; margin-top: 16px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--ph-gut); margin-inline: calc(var(--ph-gut) * -1);
    padding-bottom: 4px;
}
.pf-photo .pf-cards::-webkit-scrollbar { display: none; }
.pf-photo .pf-card-item {
    flex: 0 0 clamp(150px, 44%, 190px); min-width: 0; scroll-snap-align: start;
    background: var(--ph-panel); border: 1px solid var(--pf-line); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
}
.pf-photo .pf-card-item:hover { transform: none; box-shadow: none; border-color: var(--ph-hair); }
.pf-photo .pf-card-item:hover .pf-card-item__media img { transform: scale(1.05); }
.pf-photo .pf-card-item__media { width: 100%; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; }
.pf-photo .pf-card-item__media img,
.pf-photo .pf-card-item__media video { width: 100%; height: 100%; object-fit: cover; min-height: 0; transition: transform .5s var(--pf-ease); }
.pf-photo .pf-card-item__body { padding: 12px 14px 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pf-photo .pf-card-item__body h3 { flex: 1 1 auto; font-family: var(--pf-display); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.pf-photo .pf-price { font-family: var(--pf-display); color: var(--ph-gold); font-weight: 600; }
.pf-photo .pf-card-item__body p { flex-basis: 100%; margin: 5px 0 0; opacity: .62; font-size: .82rem; line-height: 1.45; }

/* ---------- business hours ---------- */
.pf-photo .pf-hours {
    margin-top: 16px; background: var(--ph-panel); border: 1px solid var(--pf-line);
    border-radius: 18px; padding: 6px 18px; display: block;
}
.pf-photo .pf-hours > div {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--pf-line); border-top: 0;
}
.pf-photo .pf-hours > div:last-child { border-bottom: 0; }
.pf-photo .pf-hours dt { font-size: .88rem; opacity: .82; }
.pf-photo .pf-hours dd { margin: 0; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ph-gold); }

/* ---------- location ---------- */
.pf-photo .pf-loc {
    background: var(--ph-panel); border: 1px solid var(--pf-line); border-radius: 18px;
    padding: 18px; margin: 16px 0 0; opacity: 1; font-size: 1em;
}
.pf-photo .pf-loc__map {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border-radius: 14px; overflow: hidden; margin-bottom: 14px; padding: 22px 16px;
    min-height: 132px; text-align: center;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c-text) 17%, transparent) 1.3px, transparent 0) 0 0/20px 20px,
        var(--c-bg2);
}
.pf-photo .pf-loc__pin {
    width: 42px; height: 42px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
    display: grid; place-items: center; flex: none;
    background: var(--ph-gold); color: #17120a; box-shadow: 0 12px 24px -8px rgba(0,0,0,.7);
}
.pf-photo .pf-loc__pin svg { width: 19px; height: 19px; transform: rotate(45deg); }
.pf-photo .pf-loc__addr { margin: 0; font-size: .92rem; opacity: .86; line-height: 1.5; }
.pf-photo .pf-loc__cta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 20px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ph-gold) 78%, var(--c-primary)), var(--ph-gold));
    color: #17120a; font-weight: 700; font-size: .84rem;
}
.pf-photo .pf-loc__cta svg { width: 15px; height: 15px; }

/* ---------- client words ---------- */
.pf-photo .pf-quotes { margin-top: 16px; gap: 10px; }
.pf-photo .pf-quote {
    background: var(--ph-panel); border: 1px solid var(--pf-line);
    border-inline-start: 3px solid var(--ph-gold); border-radius: 16px;
    padding: 22px 22px 20px;
}
.pf-photo .pf-quote::before { top: 6px; inset-inline-start: 16px; opacity: .16; color: var(--ph-gold); }
.pf-photo .pf-quote p { font-style: italic; opacity: .92; font-family: var(--pf-display); }
.pf-photo .pf-quote cite { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; opacity: .62; }

/* ---------- links ---------- */
.pf-photo .pf-links--cre { margin-top: 16px; }
.pf-photo .pf-link { background: var(--ph-panel); border: 1px solid var(--pf-line); border-radius: 14px; }
.pf-photo .pf-link:hover { border-color: var(--ph-hair); }

/* ---------- studio booking form ---------- */
.pf-photo .pf-contact { margin-top: 34px; }
.pf-photo .pf-contact__list { margin-top: 14px; }
.pf-photo .pf-form { margin-top: 16px; gap: 12px; }
.pf-photo .pf-form label > span {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .6; font-weight: 600;
}
.pf-photo .pf-form input, .pf-photo .pf-form textarea {
    background: var(--ph-panel2); border: 1px solid var(--pf-line); border-radius: 13px; padding: 14px 15px;
}
.pf-photo .pf-form input:focus, .pf-photo .pf-form textarea:focus { border-color: var(--ph-gold); }
.pf-photo .pf-form .pf-btn--primary {
    width: 100%; padding: 15px 20px; border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ph-gold) 78%, var(--c-primary)), var(--ph-gold));
    color: #17120a; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
}

/* decorative studio light bleeding in from the page edge */
.pf-photo-lightart {
    position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: 0; top: 46%; width: min(62%, 300px); aspect-ratio: 640/769;
    opacity: .3; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 34%, transparent 72%);
            mask-image: radial-gradient(circle at 30% 45%, #000 34%, transparent 72%);
}
.pf-photo-lightart img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- bottom section-nav strip ---------- */
.pf-photo-tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 19;
    display: flex; justify-content: space-around;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--pf-line);
}
.pf-photo-tabbar a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 2px; color: var(--c-text); opacity: .58; text-decoration: none;
    transition: opacity .16s ease, color .16s ease;
}
.pf-photo-tabbar a:hover, .pf-photo-tabbar a:active, .pf-photo-tabbar a:focus-visible { opacity: 1; color: var(--ph-gold); }
.pf-photo-tabbar svg { width: 21px; height: 21px; }
.pf-photo-tabbar span {
    font-size: .6rem; font-weight: 600; letter-spacing: .04em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* This template carries its own actions: Save contact is the hero button, QR
   lives in the app bar, and the message form is the last section. The shared
   floating bar would only repeat them, so it is hidden FOR THIS TEMPLATE ONLY
   (the element still renders for every other template). */
body.pf-rnd-photographer .pf-actionbar { display: none; }
/* the contact channels already sit in the icon row up top — do not list them twice */
.pf-photo .pf-contact__list { display: none; }

/* ---------- narrow phones ---------- */
@media (max-width: 359px) {
    .pf-photo-quick__ic { width: 44px; height: 44px; }
    .pf-photo-quick__lb { font-size: .58rem; }
    .pf-photo-tabbar span { font-size: .55rem; }
    .pf-photo-hero__id .pf-avatar--ring { width: 88px; height: 88px; }
    .pf-photo--cover .pf-photo-hero__id { margin-top: -92px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .pf-photo-hero__img img { animation: none; }
    .pf-photo .pf-gallery img,
    .pf-photo .pf-card-item__media img,
    .pf-photo-quick__ic { transition: none; }
}

/* ---------- app-bar tools: language · light/dark · QR ---------- */
.pf-photo-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.pf-photo-lang {
    display: flex; align-items: center; gap: 1px; padding: 3px;
    background: var(--ph-panel); border: 1px solid var(--pf-line); border-radius: 999px;
}
.pf-photo-lang a {
    display: block; padding: 5px 9px; border-radius: 999px;
    font-size: .64rem; font-weight: 700; letter-spacing: .06em;
    color: inherit; text-decoration: none; opacity: .55;
    transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.pf-photo-lang a:hover, .pf-photo-lang a:focus-visible { opacity: 1; }
.pf-photo-lang a.is-on {
    opacity: 1; color: #17120a;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ph-gold) 78%, var(--c-primary)), var(--ph-gold));
}
.pf-photo-tool {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--pf-line); background: var(--ph-panel); color: inherit;
    font: inherit; padding: 0;
    transition: border-color .16s ease, color .16s ease;
}
.pf-photo-tool:hover, .pf-photo-tool:focus-visible { border-color: var(--ph-hair); color: var(--ph-gold); }
.pf-photo-tool svg { width: 16px; height: 16px; display: block; }

.pf-photo-film {
    position: absolute; z-index: -1; pointer-events: none;
    inset-inline-start: 0; top: clamp(360px, 52vh, 520px); height: min(1100px, 46%);
    width: 30px; opacity: .3;
    background:
        linear-gradient(90deg,
            var(--ph-gold) 0 5px, transparent 5px 9px,
            color-mix(in srgb, var(--ph-gold) 35%, transparent) 9px 21px,
            transparent 21px 25px, var(--ph-gold) 25px 30px);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26'%3E%3Crect x='0' y='7' width='5' height='12' rx='1.6' fill='%23000'/%3E%3Crect x='25' y='7' width='5' height='12' rx='1.6' fill='%23000'/%3E%3Crect x='7' y='1' width='16' height='24' rx='1' fill='%23000'/%3E%3C/svg%3E") repeat-y center,
        linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
            mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26'%3E%3Crect x='0' y='7' width='5' height='12' rx='1.6' fill='%23000'/%3E%3Crect x='25' y='7' width='5' height='12' rx='1.6' fill='%23000'/%3E%3Crect x='7' y='1' width='16' height='24' rx='1' fill='%23000'/%3E%3C/svg%3E") repeat-y center,
        linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

/* ---------- decoration: warm light leak bleeding across the upper page ---------- */
.pf-photo-leak {
    position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: -10%; top: clamp(300px, 44vh, 460px);
    width: min(90%, 420px); aspect-ratio: 1/1;
    background:
        radial-gradient(circle at 65% 40%, color-mix(in srgb, var(--ph-gold) 42%, transparent), transparent 62%),
        radial-gradient(circle at 40% 65%, color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 58%);
    filter: blur(22px); opacity: .5;
}

/* ---------- decoration: camera body resting at the foot of the card ---------- */
.pf-photo-gearart {
    position: absolute; z-index: -1; pointer-events: none;
    inset-inline-start: -12%; bottom: 190px;
    width: min(58%, 260px); aspect-ratio: 1/1;
    opacity: .3; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at 55% 50%, #000 34%, transparent 70%);
            mask-image: radial-gradient(circle at 55% 50%, #000 34%, transparent 70%);
}
.pf-photo-gearart img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* no fixed action bar any more — only the nav strip needs clearing */
.pf-photo { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

@media (max-width: 359px) {
    .pf-photo-lang a { padding: 5px 7px; font-size: .6rem; }
    .pf-photo-tool { width: 32px; height: 32px; }
    .pf-photo-top__brand span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-photo-lang a, .pf-photo-tool { transition: none; }
}

/* ---------- horizontal rails: services, products, projects ----------
   The row itself scrolls; the arrows are added by the template's own script
   so the row is obviously scrollable where no scrollbar is drawn. Without
   JS the row still scrolls by touch/trackpad — the buttons are an extra. */
.pf-photo-rail { position: relative; }
.pf-photo-rail__btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
    display: none; place-items: center;
    font: 600 20px/1 var(--pf-display); color: var(--c-text);
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--pf-line);
    transition: opacity .16s ease, border-color .16s ease, color .16s ease;
}
.pf-photo-rail.is-scrollable .pf-photo-rail__btn { display: grid; }
.pf-photo-rail__btn:hover:not(:disabled) { border-color: var(--ph-hair); color: var(--ph-gold); }
.pf-photo-rail__btn:disabled { opacity: .25; cursor: default; }
.pf-photo-rail__btn--prev { inset-inline-start: 2px; }
.pf-photo-rail__btn--next { inset-inline-end: 2px; }

/* projects scroll side to side like the service cards */
.pf-photo .pf-portfolio {
    display: flex; gap: 10px; margin-top: 16px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--ph-gut); margin-inline: calc(var(--ph-gut) * -1);
    padding-bottom: 4px;
}
.pf-photo .pf-portfolio::-webkit-scrollbar { display: none; }
.pf-photo .pf-work {
    flex: 0 0 clamp(190px, 62%, 250px); min-width: 0; scroll-snap-align: start;
    background: transparent; border: 0; border-radius: 0;
}
.pf-photo .pf-work__media { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; }

/* ---------- optional testimonial portrait ---------- */
.pf-photo .pf-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.pf-photo .pf-quote p { flex-basis: 100%; }
.pf-photo .pf-quote__face { border-color: var(--ph-hair); }

/* ---------- gallery lightbox ---------- */
.pf-photo-lb {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(6, 5, 4, .94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-photo-lb[hidden] { display: none; }
.pf-photo-lb__stage {
    margin: 0; max-width: min(100%, 1100px); max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pf-photo-lb__stage img {
    max-width: 100%; max-height: calc(100vh - 130px);
    width: auto; height: auto; object-fit: contain; display: block;
    border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
}
.pf-photo-lb__stage figcaption {
    font-family: var(--pf-display); font-size: .76rem; letter-spacing: .18em;
    color: #f3ece0; opacity: .7;
}
.pf-photo-lb__btn {
    position: absolute; z-index: 2; cursor: pointer; padding: 0;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    font: 400 26px/1 system-ui, sans-serif; color: #f3ece0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    transition: background .16s ease, border-color .16s ease;
}
.pf-photo-lb__btn:hover, .pf-photo-lb__btn:focus-visible {
    background: rgba(255,255,255,.16); border-color: var(--c-accent2);
}
.pf-photo-lb__close { top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; font-size: 18px; }
.pf-photo-lb__nav { top: 50%; transform: translateY(-50%); }
.pf-photo-lb__prev { inset-inline-start: 10px; }
.pf-photo-lb__next { inset-inline-end: 10px; }
@media (max-width: 480px) {
    .pf-photo-lb__nav { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
    .pf-photo-lb__prev { inset-inline-start: 22%; }
    .pf-photo-lb__next { inset-inline-end: 22%; }
    .pf-photo-lb__stage img { max-height: calc(100vh - 190px); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-photo-lb__btn, .pf-photo-rail__btn { transition: none; }
}

/* ==========================================================================
   ORNAMENT — engraved corner frames and profession crests
   Shared by every preset on this renderer (photographer, videographer,
   realestate, musician, interior, architecture). The markup comes from
   _ornament.php; the emblem SET is chosen there by template key, so a
   property card is stamped with keys and doors and never with cameras.

   Ornament is structural, not ambient: it sits in the panel's own box rather
   than behind the page, which is the only reason it is visible at all on an
   edge-to-edge card. Everything is aria-hidden and pointer-events:none.
   ========================================================================== */
.pf-photo .pf-sec {
    position: relative;
    padding: 30px 14px 20px;
}
.pf-photo .pf-orn {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; color: var(--ph-gold); opacity: .5;
}
.pf-photo .pf-orn .orn-c { position: absolute; width: 42px; height: 42px; overflow: visible; }
.pf-photo .pf-orn .orn-c:nth-child(1) { top: 0; left: 0; }
.pf-photo .pf-orn .orn-c:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); }
.pf-photo .pf-orn .orn-c:nth-child(3) { bottom: 0; right: 0; transform: rotate(180deg); }
.pf-photo .pf-orn .orn-c:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }

/* ---- the crest: an emblem seated on the panel's top edge ---- */
.pf-photo .pf-orn-crest {
    position: absolute; z-index: 2;
    top: 0; inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px; padding: 5px;
    border-radius: 50%;
    color: var(--ph-gold);
    background: var(--ph-panel);
    border: 1px solid color-mix(in srgb, var(--ph-gold) 34%, transparent);
    box-shadow: 0 0 0 5px var(--c-bg);
}
.pf-photo .pf-orn-crest .orn-g { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- idle motion: only the parts that would really move ---- */
.pf-photo .orn-spin  { transform-origin: 50% 50%; animation: pf-orn-turn 26s linear infinite; }
.pf-photo .pf-orn-crest--key .orn-spin { transform-origin: 12px 14px; animation: pf-orn-key 9s ease-in-out infinite; }
.pf-photo .orn-swing { transform-origin: 20% 30%; animation: pf-orn-swing 7s ease-in-out infinite; }
.pf-photo .pf-orn-crest--pin .orn-swing { transform-origin: 20px 32px; animation: pf-orn-swing 6s ease-in-out infinite; }
.pf-photo .orn-pulse { animation: pf-orn-pulse 5.5s ease-in-out infinite; }

@keyframes pf-orn-turn  { to { transform: rotate(360deg); } }
@keyframes pf-orn-key   { 0%, 70%, 100% { transform: rotate(0); } 82% { transform: rotate(-26deg); } }
@keyframes pf-orn-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes pf-orn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- the draw-on ----
   One dash long enough to hide the longest run in the corner. The shell winds
   these back only when it knows it may animate, so the default here is
   FINISHED: no JavaScript means complete frames, never blank ones. */
.pf-photo .pf-orn :is(path, rect, circle) { stroke-dasharray: 190; stroke-dashoffset: 0; }
.pf-photo .pf-orn.is-armed :is(path, rect, circle) { stroke-dashoffset: 190; }
.pf-photo .pf-orn.is-drawn :is(path, rect, circle) {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.pf-photo .pf-orn.is-drawn .orn-c:nth-child(2) :is(path, rect, circle) { transition-delay: .08s; }
.pf-photo .pf-orn.is-drawn .orn-c:nth-child(3) :is(path, rect, circle) { transition-delay: .16s; }
.pf-photo .pf-orn.is-drawn .orn-c:nth-child(4) :is(path, rect, circle) { transition-delay: .24s; }

/* the crest fades up with its frame rather than drawing, so the emblem stays
   legible the whole way in */
.pf-photo .pf-sec:has(.pf-orn.is-armed) .pf-orn-crest { opacity: 0; transform: translate(-50%, -38%); }
.pf-photo .pf-sec:has(.pf-orn.is-drawn) .pf-orn-crest {
    opacity: 1; transform: translate(-50%, -50%);
    transition: opacity .5s ease .35s, transform .5s cubic-bezier(.22, .61, .36, 1) .35s;
}

@media (min-width: 600px) {
    .pf-photo .pf-sec { padding: 34px 22px 24px; }
    .pf-photo .pf-orn .orn-c { width: 52px; height: 52px; }
    .pf-photo .pf-orn-crest { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-photo .orn-spin, .pf-photo .orn-swing, .pf-photo .orn-pulse { animation: none; }
    .pf-photo .pf-orn.is-drawn :is(path, rect, circle) { transition: none; }
    .pf-photo .pf-sec:has(.pf-orn.is-drawn) .pf-orn-crest { transition: none; }
}