/* Old School Music — secção "Vlogs" (YouTube). Só classes próprias (osm-vlog*, osm-yt*)
   e os tokens do site (--ink, --gold, --bg2, --bb, --an…): não mexe noutras secções. */

#vlogs{background:var(--bg2);padding:88px 24px}
/* cabeçalho centrado, como os das outras secções (o site centra todos os rótulos) */
.osm-vlogs-cab{display:flex;flex-direction:column;align-items:center;text-align:center}
.osm-vlogs-cab .section-title{margin:0;text-align:center}
.osm-vlogs-cab .section-copy{margin:14px auto 22px;text-align:center}
.osm-yt-sub{gap:10px;white-space:nowrap}
.osm-yt-sub img{width:20px;height:20px;display:block;flex:0 0 auto}
.osm-vlogs-app{margin-top:34px}
.osm-vlogs :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- vídeo em destaque ---------- */
.osm-vlog-destaque{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);background:var(--ink);box-shadow:0 30px 70px rgba(13,13,13,.18)}
.osm-vlog-ecra{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.osm-vlog-ecra iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.osm-vlog-capa{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111;cursor:pointer;display:block}
.osm-vlog-capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.osm-vlog-capa::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45));pointer-events:none}
.osm-vlog-capa:hover img{transform:scale(1.03);filter:brightness(.92)}
.osm-vlog-play{position:absolute;left:50%;top:50%;z-index:1;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.osm-vlog-play svg{width:32px;height:32px;fill:currentColor;margin-left:4px}
.osm-vlog-capa:hover .osm-vlog-play{transform:scale(1.08);background:var(--gold2)}
.osm-vlog-selo{position:absolute;left:16px;top:16px;z-index:1;font-family:var(--an);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--ink);background:var(--gold2);padding:7px 11px}
.osm-vlog-info{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:30px 30px 32px;color:#fff;min-width:0}
.osm-vlog-kicker{font-family:var(--an);font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold2)}
.osm-vlog-titulo{margin:0;font-family:var(--bb);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:.98;letter-spacing:.5px;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.osm-vlog-yt{align-self:flex-start;font-family:var(--an);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .2s}
.osm-vlog-yt:hover{color:var(--gold2)}
.osm-vlog-erro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;color:#fff;background:#111}
.osm-vlog-erro p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)}
.osm-vlog-erro .btn.primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- mais vídeos ---------- */
.osm-vlogs-mais{margin-top:34px}
.osm-vlogs-mais-rot{font-family:var(--an);font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.osm-vlogs-grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.osm-vlog-cartao{display:flex;flex-direction:column;gap:12px;padding:0 0 14px;border:1px solid var(--line);background:var(--paper);text-align:left;cursor:pointer;font:inherit;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.osm-vlog-cartao:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px rgba(13,13,13,.12)}
.osm-vlog-mini{position:relative;display:block;aspect-ratio:16/9;background:#111;overflow:hidden}
.osm-vlog-mini img{width:100%;height:100%;object-fit:cover;display:block}
.osm-vlog-mini .osm-vlog-play{width:48px;height:48px;margin:-24px 0 0 -24px}
.osm-vlog-mini .osm-vlog-play svg{width:20px;height:20px;margin-left:2px}
.osm-vlog-cartao-txt{display:flex;flex-direction:column;gap:6px;padding:0 14px}
.osm-vlog-cartao-t{font-family:var(--an);font-size:14px;font-weight:700;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.osm-vlog-cartao-d{font-family:var(--an);font-size:12px;color:var(--muted)}
.osm-vlogs-vazio{margin:0;font-family:var(--an);font-size:14px}
.osm-vlogs-vazio a{color:var(--ink)}

/* ---------- YouTube nos cartões de redes sociais (Contacto): 4 redes ---------- */
.contact-actions .social-cards{grid-template-columns:repeat(4,1fr);max-width:580px}

@media(max-width:980px){
  #vlogs{padding:64px 16px}
  .osm-vlog-destaque{grid-template-columns:1fr}
  .osm-vlog-info{padding:22px 20px 24px}
  .osm-vlogs-app{margin-top:26px}
}
@media(max-width:640px){
  .osm-vlogs-cab .osm-yt-sub{width:100%;white-space:normal;text-align:center}
  .osm-vlog-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .osm-vlog-play svg{width:26px;height:26px}
  .osm-vlogs-grelha{grid-template-columns:1fr;gap:10px}
  .osm-vlog-cartao{flex-direction:row;align-items:center;gap:12px;padding:0}
  .osm-vlog-mini{flex:0 0 42%}
  .osm-vlog-cartao-txt{padding:10px 12px 10px 0}
  .contact-actions .social-cards{grid-template-columns:repeat(2,1fr);max-width:360px}
}
/* Telemóveis muito estreitos (≤350px): o 4.º ícone empurrava o botão do menu para fora
   do ecrã. Aí o topo fica como antes; o YouTube continua no menu, na secção e no Contacto. */
@media(max-width:350px){
  .nav-social a[aria-label="YouTube"]{display:none}
}
@media(prefers-reduced-motion:reduce){
  .osm-vlog-capa img,.osm-vlog-play,.osm-vlog-cartao{transition:none}
  .osm-vlog-capa:hover img,.osm-vlog-cartao:hover{transform:none}
}