/* =====================================================================
   guiljam.nl — aanvulling op de gedeelde stylesheet (site.css), in dezelfde
   lagen en ná site.css geladen. Alles wat guiljam.nl deelt met emno.nl (balk,
   menu, knoppen, iconen, tracklijsten, albumkaarten, speler, cookiebalk,
   tekstpagina's, capsules, labels, vlakken) komt uit site.css; hier staat
   alleen wat guiljam.nl extra heeft: het merk-stempel, YouTube-knoppen,
   videokaarten, concerttickets, de feitenlijst, de FAQ en de video-overlay.
   ===================================================================== */

@layer layout {
    /* Het stempel in de balk: een g in plaats van een e. */
    .brand::before { content: "g"; padding-block-end: .1em; }
}

@layer components {
    /* Setlist: de Spotify-afspeelknop zit op het nummer (site.css); rechts in de regel de YouTube-knop. */
    .track-actions { display: inline-flex; gap: .35rem; }
    .iconbtn { inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: color-mix(in oklch, var(--ink) 6%, transparent); transition: background-color .2s, color .2s, scale .3s var(--ease);
        svg { inline-size: 20px; block-size: 20px; } &:hover { scale: 1.08; } }
    .iconbtn--yt { color: var(--youtube); &:hover { background: var(--youtube); color: #fff; } }
    .ico--spotify, .ico--youtube { --ico-bg: var(--paper); }
    /* Albumkaart als knop (speelt in de minispeler): zelfde kaart als op emno.nl. */
    button.card { inline-size: 100%; text-align: start; color: inherit; }
    /* Videokaarten: 16:9 met onderschrift over de foto. */
    .grid-videos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .vcard { position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9; overflow: clip; border-radius: var(--r-m); background: var(--paper-3); color: #fff; text-align: start; box-shadow: 0 0 0 1px var(--rule); transition: translate .35s var(--ease), box-shadow .35s;
        img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .5s var(--ease); }
        .shade { position: absolute; inset: 0; background: linear-gradient(to top, oklch(12% .02 320 / .95) 0%, oklch(12% .02 320 / .45) 40%, transparent 70%); pointer-events: none; }
        .cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: .7rem .85rem .8rem; display: grid; gap: .1rem; }
        .cap .t { font-weight: 650; line-height: 1.2; text-shadow: 0 1px 8px oklch(0% 0 0 / .6); }   /* label en duur: .eyebrow en .label uit site.css */
        .cap .label { color: oklch(85% .01 80); }
        .vcard-play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 52px; block-size: 52px; opacity: 0; scale: .85; transition: opacity .25s, scale .35s var(--ease); }
        &:hover, &:focus-visible { translate: 0 -3px; box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-2); img { scale: 1.05; } .vcard-play { opacity: 1; scale: 1; } } }
    /* Feiten van het concert. */
    .factlist { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        > .panel { display: flex; align-items: center; gap: .8rem; }   /* vlak en label (dt) uit site.css */
        .ico { inline-size: 1.25rem; block-size: 1.25rem; color: var(--accent-text); flex: none; }
        dd { font-weight: 650; } }
    /* FAQ. */
    .faq { display: grid; gap: 2px; .q { font-weight: 650; margin-block-end: .2rem; } .a { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; max-inline-size: 72ch; } }   /* het vlak per vraag: .panel uit site.css */
    /* Video-overlay (YouTube). */
    body.lay-open { overflow: hidden; }
    .lay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
    .lay__backdrop { position: absolute; inset: 0; background: oklch(8% .02 320 / .8); backdrop-filter: blur(4px); }
    .lay__panel { position: relative; inline-size: min(860px, 94vw); max-block-size: 92vh; }
    .lay__close { position: absolute; inset-block-start: -2.9rem; inset-inline-end: 0; inline-size: 2.3rem; block-size: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.3rem; box-shadow: var(--shadow-1); &:hover { background: var(--accent); color: var(--accent-ink); } }
    .lay__frame { inline-size: 100%; border-radius: var(--r-m); overflow: clip; background: #000; box-shadow: var(--shadow-2); iframe { display: block; inline-size: 100%; border: 0; } }
    .lay__frame--yt iframe { aspect-ratio: 16 / 9; block-size: auto; }
}

@layer pages {
    /* Home: concerttickets (de paginakop is .chart-head/.chart-title uit site.css). */
    .tickets { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
    .ticket { --stub: 11rem; position: relative; display: grid; grid-template-columns: 1fr var(--stub); min-block-size: 11.5rem; border-radius: var(--r-l); overflow: clip; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule), var(--shadow-1); transition: translate .35s var(--ease), box-shadow .35s;
        &:hover, &:focus-visible { translate: 0 -4px; box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-2); .ticket-photo img { scale: 1.04; } }
        @media (width < 560px) { grid-template-columns: 1fr; --stub: auto; } }
    /* De foto vult het hele ticket (vanaf 560 px ook onder de afscheurstrook); smal blijft hij in het bovenste deel. */
    .ticket-photo { position: relative; overflow: clip; min-block-size: 11.5rem; background: var(--paper-3);
        img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .6s var(--ease); }
        &::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(12% .02 320 / .92) 0%, oklch(12% .02 320 / .3) 55%, transparent); }
        @media (width >= 560px) { position: static; overflow: visible; } }
    .ticket-text { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1rem 1.1rem; display: grid; gap: .15rem; color: #fff; z-index: 1;
        @media (width >= 560px) { inset-inline-end: var(--stub); }
        .artist { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 10px oklch(0% 0 0 / .6); }
        .where { font-size: var(--fs-s); color: oklch(88% .01 80); } }
    .ticket-cover { position: absolute; inset-block-start: .9rem; inset-inline-start: .9rem; inline-size: 56px; block-size: 56px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 10px oklch(0% 0 0 / .6); z-index: 1; }
    .ticket-stub { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-inline-start: 2px dashed var(--rule-2); text-align: center;
        background: color-mix(in oklch, var(--paper) 58%, transparent); @supports (backdrop-filter: blur(1px)) { backdrop-filter: blur(10px) saturate(140%); }
        .date, .stat b, .stat small { text-shadow: 0 1px 6px color-mix(in oklch, var(--paper) 80%, transparent); }
        .stat { display: grid; justify-items: center; line-height: 1; b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; } small { margin-block-start: .25rem; } }   /* small: .label uit site.css */
        @media (width < 560px) { border-inline-start: 0; border-block-start: 2px dashed var(--rule-2); grid-auto-flow: column; justify-content: space-around; } }
    .ticket::before, .ticket::after { content: ""; position: absolute; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); inset-inline-end: calc(var(--stub) - 9px); z-index: 2; }
    .ticket::before { inset-block-start: -9px; } .ticket::after { inset-block-end: -9px; }
    @media (width < 560px) { .ticket::before, .ticket::after { display: none; } }
}

@layer motion {
    @supports (animation-timeline: view()) { .tickets .ticket, .grid .vcard { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 26%; } }
}