/* /video-hosting (video delivery). Mockups of a client gallery with films, the download size picker, gallery settings
   and gallery activity, sized in em off the .mk container (mkt-page.css). Every rule is scoped to .lf-page. */

/* ---- shared bits ---- */
.lf-page .vd-h{display:block;font-size:.62em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8b867c;margin:1.2em 0 .6em}
.lf-page .vd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.lf-page .vd-card{position:relative;margin:0;border-radius:.5em;overflow:hidden;background:#1b1b1a}
.lf-page .vd-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lf-page .vd-cards.tall .vd-card img{aspect-ratio:3/4}
.lf-page .vd-card span{position:absolute;left:.7em;bottom:.6em;font-size:.68em;font-weight:600;color:#fff;text-shadow:0 1px 6px #0008}
.lf-page .vd-play{position:absolute;left:50%;top:50%;width:2.2em;height:2.2em;margin:-1.1em 0 0 -1.1em;border-radius:50%;background:#ffffffe6;box-shadow:0 .3em 1em #0003}
.lf-page .vd-play:after{content:"";position:absolute;left:.85em;top:.62em;border-left:.68em solid #1b1b1a;border-top:.48em solid transparent;border-bottom:.48em solid transparent}
.lf-page .vd-size{display:flex;align-items:center;gap:.7em;border:1px solid #ece8e1;border-radius:.6em;padding:.6em .75em;margin-top:.45em}
.lf-page .vd-size.on{border-color:#a07a3a;background:#faf6ef}
.lf-page .vd-size i{flex:none;width:1em;height:1em;border-radius:50%;border:1.5px solid #c9c3b8;background:#fff}
.lf-page .vd-size.on i{border:.3em solid #a07a3a}
.lf-page .vd-size b{display:block;font-size:.74em;font-weight:600}
.lf-page .vd-size span{display:block;font-size:.6em;color:#7a776f;margin-top:.15em}
.lf-page .vd-row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.85em 1.3em;border-top:1px solid #f1eee8;font-size:.76em;color:#3f413d}
.lf-page .mk-panel .hd + .vd-row{border-top:0}
.lf-page .vd-row b{font-weight:600;color:#1b1b1a;white-space:nowrap}
.lf-page .vd-sw{flex:none;position:relative;width:2.3em;height:1.3em;border-radius:99px;background:#d9d5cd}
.lf-page .vd-sw:after{content:"";position:absolute;left:.15em;top:.15em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em #0003}
.lf-page .vd-sw.on{background:#2f8a5b}
.lf-page .vd-sw.on:after{left:auto;right:.15em}

.lf-page .pg-hero h1.vd-h1{font-size:clamp(34px,3.5vw,50px)}

/* ---- hero: the client gallery with films + photos, and a phone choosing a download size ---- */
.lf-page .vd-desk{margin-top:2em}
.lf-page .vd-cover{position:relative}
.lf-page .vd-cover img{display:block;width:100%;height:auto;aspect-ratio:16/6.4;object-fit:cover;object-position:50% 40%}
.lf-page .vd-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#000a 100%)}
.lf-page .vd-title{position:absolute;left:1.4em;bottom:1.1em;z-index:1;color:#fff}
.lf-page .vd-title b{display:block;font:400 1.6em/1.1 Georgia,serif}
.lf-page .vd-title small{font-size:.62em;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.lf-page .vd-body{padding:.2em 1.4em 1.4em}
.lf-page .vd-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em}
.lf-page .vd-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:.35em}
.lf-page .vd-phone .ph img{aspect-ratio:16/10}
.lf-page .vd-phone .meta{margin-bottom:.3em}
.lf-page .vd-phone .vd-size{padding:.5em .6em}

/* ---- films and photos: the Featured layout with the film playing ---- */
.lf-page .vd-feature .mk-scale{font-size:calc(100cqw / 34)}
.lf-page .vd-gal{padding:1.2em 1.2em 1.4em}
.lf-page .vd-film{position:relative;border-radius:.6em;overflow:hidden;background:#1b1b1a}
.lf-page .vd-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lf-page .vd-tag{position:absolute;left:.8em;bottom:.7em;font-size:.66em;font-weight:600;color:#fff;background:#0007;border-radius:99px;padding:.3em .8em}

/* ---- downloads: settings, and the client's size picker ---- */
.lf-page .vd-dl .mk-scale,.lf-page .vd-access .mk-scale{font-size:calc(100cqw / 34)}
.lf-page .vd-dl .vd-set,.lf-page .vd-access .vd-set{width:82%;padding-bottom:2.6em}
.lf-page .vd-pick{position:relative;width:52%;margin:-2.2em 0 0 auto;padding:1.2em 1.2em 1.3em;box-shadow:0 1.6em 3.6em #3b2c1f2e}
.lf-page .vd-pt{display:block;font-size:.95em;font-weight:600}
.lf-page .vd-ps{display:block;font-size:.66em;color:#7a776f;margin:.2em 0 .5em}

/* ---- private and on brand: settings, and the client's login ---- */
.lf-page .vd-login{position:relative;width:46%;margin:-2.2em 0 0 auto;display:flex;flex-direction:column;gap:.55em;background:#fff;border:1px solid #e6e2da;border-radius:1em;padding:1.4em 1.3em;box-shadow:0 1.6em 3.6em #3b2c1f2e;text-align:center}
.lf-page .vd-login > b{font:400 1.15em/1.2 Georgia,serif;margin-bottom:.3em}
.lf-page .vd-field{display:block;text-align:left;font-size:.7em;color:#5d5f5b;border:1px solid #e2ddd4;border-radius:.45em;padding:.6em .7em}
.lf-page .vd-login .mk-btn{margin-top:.2em}

/* ---- analytics: gallery activity ---- */
.lf-page .vd-act .mk-scale{font-size:calc(100cqw / 32)}
.lf-page .vd-ev{display:flex;align-items:center;gap:.8em;padding:.95em 1.3em;border-top:1px solid #f1eee8}
.lf-page .mk-panel .hd + .vd-ev{border-top:0}
.lf-page .vd-av{flex:none;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#f3ebe0;color:#7a5a24;font-size:.7em;font-weight:700}
.lf-page .vd-ev b{display:block;font-size:.76em;font-weight:600}
.lf-page .vd-ev div span{display:block;font-size:.64em;color:#7a776f;margin-top:.2em}

/* ---- what to look for ---- */
.lf-page .vd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lf-page .vd-list li{background:#f8f6f1;border:1px solid #ece8e1;border-radius:16px;padding:22px 22px 20px}
.lf-page .vd-list h3{font-size:17px;font-weight:600;margin:0 0 8px}
.lf-page .vd-list p{font-size:14.5px;line-height:1.55;color:#5d5f5b;margin:0}
@media (max-width:1100px){.lf-page .vd-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lf-page .vd-list{grid-template-columns:minmax(0,1fr)}}

/* ---- narrow columns (phones): the overlapping cards stack ---- */
@container (max-width:420px){
  .lf-page .vd-dl .mk-scale,.lf-page .vd-access .mk-scale{font-size:calc(100cqw / 24)}
  .lf-page .vd-dl .vd-set,.lf-page .vd-access .vd-set{width:100%}
  .lf-page .vd-pick,.lf-page .vd-login{width:78%;margin:-1em 0 0 auto}
  .lf-page .vd-feature .mk-scale,.lf-page .vd-act .mk-scale{font-size:calc(100cqw / 24)}
}