/* ==========================================================================
   VIDEOGRAPHER — a preset on the approved `photographer` renderer.

   CardRenderer loads templates/photographer.css first (the renderer's shared
   design) and then this file, so everything here is only what a film card
   does DIFFERENTLY: motion-first framing for the work grid, a play affordance
   on every thumbnail, and its own set of decorative art.

   Scoped to body.pf-tpl-videographer so it can never touch the photographer
   preset or any other template. All content still comes from the card itself.
   ========================================================================== */

body.pf-tpl-videographer .pf-photo {
    /* a touch cooler and deeper than the photography set */
    --ph-panel: color-mix(in srgb, var(--c-text) 7%, var(--c-bg));
    --ph-panel2: color-mix(in srgb, var(--c-text) 11%, var(--c-bg));
}

/* --- the work grid reads as footage: even 16:9 frames, not a photo sheet --- */
body.pf-tpl-videographer .pf-photo .pf-gallery {
    display: grid; column-count: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 700px) {
    body.pf-tpl-videographer .pf-photo .pf-gallery { grid-template-columns: repeat(3, 1fr); }
}
body.pf-tpl-videographer .pf-photo .pf-gallery__cell {
    margin: 0; border-radius: 12px; overflow: hidden;
    aspect-ratio: 16 / 9; cursor: pointer;
}
body.pf-tpl-videographer .pf-photo .pf-gallery img {
    width: 100%; height: 100%; object-fit: cover;
}
/* a darkening wash so the number and the play badge stay readable on any frame */
body.pf-tpl-videographer .pf-photo .pf-gallery__cell::before {
    z-index: 3; bottom: 10px; inset-inline-start: 12px;
}
/* ::after is the gold rule in the photography set — here it becomes the play
   badge the mockup puts on every clip */
body.pf-tpl-videographer .pf-photo .pf-gallery__cell::after {
    content: ""; position: absolute; z-index: 3;
    inset-block-start: 50%; inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    background:
        /* the triangle, drawn so no extra element is needed */
        conic-gradient(from 0deg, transparent 0 100%),
        color-mix(in srgb, #000 52%, transparent);
    border: 2px solid color-mix(in srgb, #fff 88%, transparent);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 8px 22px -8px rgba(0,0,0,.8);
    transition: transform .2s var(--pf-spring), background .18s ease;
}
/* the play triangle itself, masked onto the badge */
body.pf-tpl-videographer .pf-photo .pf-gallery__cell {
    --vg-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5l9 5.5-9 5.5z' fill='%23000'/%3E%3C/svg%3E");
}
body.pf-tpl-videographer .pf-photo .pf-gallery__cell::after {
    background-color: color-mix(in srgb, #000 52%, transparent);
    background-image: var(--vg-play);
    background-repeat: no-repeat;
    background-position: 55% center;
    background-size: 18px 18px;
}
body.pf-tpl-videographer .pf-photo .pf-gallery__cell:hover::after {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: color-mix(in srgb, var(--ph-gold) 80%, transparent);
}
body.pf-tpl-videographer .pf-photo .pf-gallery__cell:hover img {
    transform: scale(1.04); filter: brightness(.86);
}
/* a permanent gradient foot so captions never fight a bright frame */
body.pf-tpl-videographer .pf-photo .pf-gallery__cell {
    background: var(--ph-panel2);
}

/* --- projects read as clips too --------------------------------------- */
body.pf-tpl-videographer .pf-photo .pf-work__media { aspect-ratio: 16 / 9; border-radius: 12px; }

/* --- service cards: wider, cinematic crop ------------------------------ */
body.pf-tpl-videographer .pf-photo .pf-card-item__media { aspect-ratio: 16 / 10; }
body.pf-tpl-videographer .pf-photo .pf-card-item { flex: 0 0 clamp(176px, 52%, 230px); }

/* --- decoration: the film-set wash, a cine lens, a fixture on set ------- */
body.pf-tpl-videographer .pf-photo-bg {
    background-image:
        linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 84%, transparent) 24%, color-mix(in srgb, var(--c-bg) 64%, transparent) 100%),
        url('/assets/img/templates/videographer-cover.jpg');
}
/* the perforation edge belongs to stills — film runs as a frame line here */
body.pf-tpl-videographer .pf-photo-perf { opacity: .3; width: 9px; }
body.pf-tpl-videographer .pf-photo-film { opacity: .22; }