/* =========================================================
   Caso studio · Kangeon
   Usa le classi cy- del caso Yun Shop (caso-yunshop.css):
   qui solo quello che cambia per i video orizzontali di YouTube
   ========================================================= */

/* film orizzontale 16:9 */
.kg-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--nero-2);border-radius:10px;box-shadow:0 0 0 1px rgba(244,246,239,.08),0 40px 90px -40px rgba(0,0,0,.9)}
.kg-film video,.kg-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* apertura: il Mediterraneo che evapora sta al centro dello schermo */
.kg-apertura>.media-pieno video{object-position:50% 50%}

/* da dove partiva: Marco in camera, prima e dopo */
.kg-faccia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(40px,6vw,80px);max-width:900px}
.kg-faccia>div{padding-top:16px;box-shadow:inset 0 1px 0 rgba(244,246,239,.22)}
.kg-faccia dt{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-80)}
.kg-faccia dd{font-weight:300;font-size:clamp(40px,4.6vw,84px);line-height:1;letter-spacing:-.05em;margin-top:10px}
.kg-faccia>div:last-child dd{color:var(--lime)}
.kg-faccia-barra{height:6px;margin-top:16px;background:rgba(244,246,239,.12);border-radius:3px;overflow:hidden}
.kg-faccia-barra i{display:block;height:100%;background:var(--bianco-80);border-radius:3px}
.kg-faccia>div:last-child .kg-faccia-barra i{background:var(--lime)}

/* la bibbia: un foglio a tutta larghezza + quello che abbiamo scartato */
.kg-bibbia{padding-block:var(--cy-aria)}
.kg-bibbia-foglio{margin:0 auto clamp(40px,5vw,72px);max-width:1640px}
.kg-bibbia-foglio img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 0 0 1px rgba(244,246,239,.1),0 40px 90px -40px rgba(0,0,0,.9)}
.kg-bibbia-foglio figcaption{margin-top:14px;color:var(--grigio);font-size:14px}
.kg-scarti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.kg-scarti>div{padding-top:16px;box-shadow:inset 0 1px 0 rgba(244,246,239,.22)}
.kg-scarti h3{margin-bottom:10px}
.kg-scarti p{color:var(--bianco-80)}

/* le mosse: film largo, testo accanto */
.kg-mosse .cy-mossa{grid-template-columns:minmax(0,7fr) minmax(0,5fr);max-width:1280px}
.kg-mosse .cy-mossa--destra{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.kg-mosse .cy-mossa .kg-film{width:100%}
.kg-mosse .cy-mossa--destra .kg-film{order:2}
.kg-mosse .cy-mossa--destra .cy-mossa-testo{order:1;justify-self:end}

/* i video su YouTube */
.kg-yt{padding-block:var(--cy-aria)}
.kg-yt-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.kg-yt-card{display:block;color:inherit;text-decoration:none}
.kg-yt-card .kg-film{transition:transform .8s var(--curva-out)}
.kg-yt-card:hover .kg-film,.kg-yt-card:focus-visible .kg-film{transform:scale(1.015)}
.kg-yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);border-radius:14px;background:rgba(14,15,12,.72);display:grid;place-items:center;transition:background .4s}
.kg-yt-play::after{content:"";border-left:18px solid var(--bianco);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.kg-yt-card:hover .kg-yt-play{background:var(--lime)}
.kg-yt-card:hover .kg-yt-play::after{border-left-color:var(--nero)}
.kg-yt-durata{position:absolute;right:10px;bottom:10px;padding:3px 6px;border-radius:4px;background:rgba(0,0,0,.8);font-size:12px;font-weight:600;color:#fff}
.kg-yt-info{display:grid;gap:6px;margin-top:16px}
.kg-yt-info .titolo-s{font-size:clamp(19px,1.6vw,26px)}
.kg-yt-meta{color:var(--grigio);font-size:15px}
.kg-yt-meta b{color:var(--lime);font-weight:600}
.kg-yt-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--bianco);font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em}

/* le copertine */
.kg-copertine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(56px,7vw,112px)}
.kg-copertine figure{margin:0}
.kg-copertine figcaption{margin-top:12px;color:var(--bianco-80);font-size:15px}

/* gli short */
.kg-short{padding-block:var(--cy-aria)}
.kg-short-griglia{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,28px)}
.kg-short-griglia .cy-film{border-radius:10px;margin-bottom:14px}
.kg-short-griglia .titolo-s{font-size:clamp(16px,1.25vw,20px);margin-bottom:6px}
.kg-short-griglia p:last-child{color:var(--bianco-80);font-size:14px}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .kg-short-griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 16px}
}
@media (max-width:900px){
  .kg-mosse .cy-mossa,.kg-mosse .cy-mossa--destra{grid-template-columns:1fr;gap:18px}
  .kg-mosse .cy-mossa--destra .kg-film{order:0}
  .kg-mosse .cy-mossa--destra .cy-mossa-testo{order:1;justify-self:start}
  .kg-mosse .cy-mossa-testo{max-width:52ch}
  .kg-scarti{grid-template-columns:1fr;gap:28px}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .kg-mosse .cy-mossa,.kg-mosse .cy-mossa--destra{grid-template-columns:1fr}
  .kg-film{border-radius:8px}
  .kg-faccia dd{font-size:clamp(34px,10vw,48px)}
  .kg-faccia dt{font-size:11px}
  .kg-yt-griglia{grid-template-columns:1fr;gap:40px}
  .kg-copertine{grid-template-columns:1fr;gap:28px}
  .kg-short-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .kg-short-griglia .titolo-s{font-size:16px}
  .kg-short-griglia p:last-child{font-size:13px}
  .kg-bibbia-foglio{margin-inline:calc(-1 * clamp(0px,0vw,0px))}
}

/* griglia di animazioni in loop sotto il reel */
.kg-loop-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,28px);margin-bottom:clamp(64px,8vw,128px)}
.kg-loop-griglia figure{margin:0}
.kg-loop-griglia figcaption{margin-top:10px;color:var(--bianco-80);font-size:14px}
@media (max-width:900px){.kg-loop-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.kg-loop-griglia{gap:22px 12px}.kg-loop-griglia figcaption{font-size:12.5px}}

/* la frase di Marco, tra il reel e la griglia */
.kg-citazione{margin:clamp(56px,7vw,112px) auto;max-width:1100px;text-align:center}
.kg-citazione p{font-weight:300;font-size:clamp(30px,3.6vw,60px);line-height:1.08;letter-spacing:-.035em}
.kg-citazione footer{margin-top:20px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--lime)}