/* tt-presenter-links.css — /presenter-links/
 *
 * The Tiny Talks replacement for linktr.ee/tinytalkspresenters: one card per
 * presenter of the current volume, carrying the same art as the credit slide
 * they just saw on stage (brush swash + speaker icon + name + role + links).
 *
 * Enqueued only on the page with WP slug `presenter-links` (functions.php),
 * which also adds the body class `tt-links-page`.
 *
 * Assets: assets/img/presenter-links/vol-09/ — swash-<shade>.png are the
 * credit-slide swash alpha recolored to the five shipped brand shades
 * (spec: Design/templates/deck-slides/credit/spec.json), icon-<slug>.png are
 * the approved speaker main icons, trimmed and downscaled.
 *
 * Selectors are written body-class-first so they beat the inlined page bundle
 * that wp_head emits after this file (same reasoning as tt-content.css).
 */

body.tt-links-page {
    --pl-ink: #000;
    --pl-cream: #e9e4de;
    --pl-tan: #ccc2b6;
    --pl-muted: #59524a;
    --pl-purple: #6d51ee;
}

/* --- page chrome ------------------------------------------------------- */

body.tt-links-page .page__content .container,
body.tt-links-page .page__header .container {
    max-width: 880px;
}

body.tt-links-page .entry-content .pl {
    margin: 0 0 24px;
}

body.tt-links-page .entry-content .pl-intro {
    font-family: Recoleta-Medium, Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--pl-muted);
    margin: 0 0 40px;
    max-width: 52ch;
}

/* --- presenter card ---------------------------------------------------- */

body.tt-links-page .entry-content .pl-list {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.tt-links-page .entry-content .pl-card {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    background: var(--pl-cream);
    border: 3px solid var(--pl-ink);
    border-radius: 28px;
    box-shadow: 8px 8px 0 var(--pl-tan);
    padding: 24px 32px 24px 16px;
}

/* swash + icon, stacked like the credit slide */
body.tt-links-page .entry-content .pl-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 213px;
    margin: 0 auto;
}

/* The default-page bundle styles every .entry-content img as a framed photo
   (`border:19px solid #fff; border-radius:22px; margin:46px auto 25px!important;
   height:auto!important`). Unframe ours — !important where the theme used it,
   or the white frame boxes the swash and the top margin shoves it over the name. */
body.tt-links-page .entry-content .pl-art img {
    display: block;
    max-width: none;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    float: none !important;
}

body.tt-links-page .entry-content .pl-swash {
    position: absolute;
    inset: 0;
    width: 240px;
    height: 213px !important;
}

body.tt-links-page .entry-content .pl-icon {
    position: relative;
    width: auto;
    height: auto !important;
    max-width: 132px;
    max-height: 117px;
}

/* --- text side --------------------------------------------------------- */

body.tt-links-page .entry-content .pl-name {
    font-family: obviously-black, "Arial Black", sans-serif;
    font-size: clamp(23px, 3.1vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--pl-ink);
    margin: 0;
    padding: 0;
}

body.tt-links-page .entry-content .pl-role {
    font-family: Recoleta-Medium, Georgia, serif;
    font-size: 17px;
    line-height: 1.45;
    color: var(--pl-muted);
    margin: 6px 0 0;
}

body.tt-links-page .entry-content .pl-links {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

body.tt-links-page .entry-content .pl-links li {
    margin: 0;
    padding: 0;
}

body.tt-links-page .entry-content .pl-links li:before {
    display: none;
}

body.tt-links-page .entry-content .pl-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    font-family: Recoleta-SemiBold, Georgia, serif;
    font-size: 17px;
    line-height: 1.3;
    color: var(--pl-ink);
    text-decoration: none;
    border-radius: 12px;
    padding: 4px 8px 4px 4px;
    margin-left: -4px;
    transition: transform 150ms ease, background-color 150ms ease;
}

body.tt-links-page .entry-content .pl-link .pl-label {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.22);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

body.tt-links-page .entry-content .pl-link:hover,
body.tt-links-page .entry-content .pl-link:focus-visible {
    background: rgba(109, 81, 238, 0.09);
    color: var(--pl-ink);
    transform: translateX(3px);
}

body.tt-links-page .entry-content .pl-link:hover .pl-label,
body.tt-links-page .entry-content .pl-link:focus-visible .pl-label {
    text-decoration-color: var(--pl-purple);
}

body.tt-links-page .entry-content .pl-link:focus-visible {
    outline: 3px solid var(--pl-purple);
    outline-offset: 2px;
}

/* --- badge tiles (redrawn from the credit-slide 68px tiles) ------------- */

body.tt-links-page .entry-content .pl-b {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
}

body.tt-links-page .entry-content .pl-b--ig {
    background-color: #d6249f;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"),
        radial-gradient(circle at 28% 108%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 68%, #285aeb 100%);
}

body.tt-links-page .entry-content .pl-b--web {
    background-color: var(--pl-purple);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19'/%3E%3Cpath d='M12 2.5a15 15 0 0 1 0 19a15 15 0 0 1 0-19z'/%3E%3C/svg%3E");
}

body.tt-links-page .entry-content .pl-b--podcast {
    background-color: #4aaa50;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5a3 3 0 0 0-3 3v6.5a3 3 0 0 0 6 0V5.5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M18.5 11v1a6.5 6.5 0 0 1-13 0v-1'/%3E%3Cpath d='M12 18.5v3'/%3E%3C/svg%3E");
}

body.tt-links-page .entry-content .pl-b--ticket {
    background-color: #f14d1a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a2.3 2.3 0 0 0 0 4.6v1.2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a2.3 2.3 0 0 0 0-4.6z'/%3E%3Cpath d='M14 7.5v9'/%3E%3C/svg%3E");
}

/* --- closing block ----------------------------------------------------- */

body.tt-links-page .entry-content .pl-more {
    margin: 48px 0 0;
    padding: 28px 32px 30px;
    border: 3px solid var(--pl-ink);
    border-radius: 28px;
    background: var(--pl-purple);
}

body.tt-links-page .entry-content .pl-more h2 {
    font-family: obviously-black, "Arial Black", sans-serif;
    font-size: clamp(20px, 2.6vw, 25px);
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    padding: 0;
}

body.tt-links-page .entry-content .pl-more .pl-links {
    margin: 0;
}

body.tt-links-page .entry-content .pl-more .pl-link {
    color: #fff;
}

body.tt-links-page .entry-content .pl-more .pl-link .pl-label {
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

body.tt-links-page .entry-content .pl-more .pl-link:hover,
body.tt-links-page .entry-content .pl-more .pl-link:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

body.tt-links-page .entry-content .pl-more .pl-link:hover .pl-label,
body.tt-links-page .entry-content .pl-more .pl-link:focus-visible .pl-label {
    text-decoration-color: #fff;
}

body.tt-links-page .entry-content .pl-more .pl-link:focus-visible {
    outline-color: #fff;
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 719px) {
    body.tt-links-page .entry-content .pl-card {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 20px 22px 24px;
        border-radius: 24px;
        box-shadow: 6px 6px 0 var(--pl-tan);
    }

    body.tt-links-page .entry-content .pl-art {
        width: 196px;
        height: 174px;
        margin: 0 0 4px;
    }

    body.tt-links-page .entry-content .pl-swash {
        width: 196px;
        height: 174px !important;
    }

    body.tt-links-page .entry-content .pl-icon {
        max-width: 108px;
        max-height: 96px;
    }

    body.tt-links-page .entry-content .pl-role {
        font-size: 16px;
    }

    body.tt-links-page .entry-content .pl-link {
        font-size: 16px;
        gap: 12px;
    }

    body.tt-links-page .entry-content .pl-more {
        padding: 24px 22px 26px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tt-links-page .entry-content .pl-link {
        transition: none;
    }

    body.tt-links-page .entry-content .pl-link:hover,
    body.tt-links-page .entry-content .pl-link:focus-visible {
        transform: none;
    }
}