/**
 * blocks.css — block styles & pattern CSS
 *
 * Enqueued AFTER style.css on both the front end (libre_enqueue_blocks_styles) and in the editor
 * (libre_add_editor_styles), so these rules layer on top of the legacy style.css.
 *
 * Add new block-style/pattern CSS HERE, not at the bottom of style.css.
 */

/* -----------------------------------------------------------------------------
 * Block Styles
 * -------------------------------------------------------------------------- */
.wp-block-search__button.has-icon {
    padding: .5rem;
}

.wp-block-image.is-style-slant,
.wp-block-post-featured-image.is-style-slant {
    --slant-angle: 3deg;
}

.wp-block-image.is-style-left-slant,
.wp-block-post-featured-image.is-style-left-slant {
    --slant-angle: -3deg;
}

.wp-block-image.is-style-no-slant,
.wp-block-post-featured-image.is-style-no-slant,
.wp-block-image.is-style-slant,
.wp-block-post-featured-image.is-style-slant,
.wp-block-image.is-style-left-slant,
.wp-block-post-featured-image.is-style-left-slant {
    --slang-img-margin: -14px;
    --slant-offset: 14px;
    --slant-border-width: 8px;

    position: relative;
    width: fit-content;
    max-width: 100%;
}

/* Tighter offset card when stacked (project breakpoint, matches the 1025px desktop slant below) */
@media (max-width: 1024px) {
    .wp-block-image.is-style-no-slant,
    .wp-block-post-featured-image.is-style-no-slant,
    .wp-block-image.is-style-slant,
    .wp-block-post-featured-image.is-style-slant,
    .wp-block-image.is-style-left-slant,
    .wp-block-post-featured-image.is-style-left-slant {
        --slant-offset: 6px;
    }
}

/* Offset yellow card sitting behind the image (sharp corners, no radius) */
.wp-block-image.is-style-no-slant::before,
.wp-block-post-featured-image.is-style-no-slant::before,
.wp-block-image.is-style-slant::before,
.wp-block-post-featured-image.is-style-slant::before,
.wp-block-image.is-style-left-slant::before,
.wp-block-post-featured-image.is-style-left-slant::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--wp--preset--color--tertiary);
    transform: translate(var(--slant-offset), var(--slant-offset));
}

/* The image itself: blue border, square corners, above the yellow card */
.wp-block-image.is-style-no-slant img,
.wp-block-post-featured-image.is-style-no-slant img,
.wp-block-image.is-style-slant img,
.wp-block-post-featured-image.is-style-slant img,
.wp-block-image.is-style-left-slant img,
.wp-block-post-featured-image.is-style-left-slant img {
    position: relative;
    z-index: 1;
    display: block;
    border: var(--slant-border-width) solid var(--wp--preset--color--primary);
}

/* Slant only on desktop; the whole frame (image + offset card) tilts as one
 * unit. Mobile keeps the frame but no angle. */
@media (min-width: 1025px) {
    .wp-block-image.is-style-slant,
    .wp-block-post-featured-image.is-style-slant {
        transform: rotate(var(--slant-angle));
        margin-right: var(--slang-img-margin);
    }

    .wp-block-image.is-style-left-slant,
    .wp-block-post-featured-image.is-style-left-slant {
        transform: rotate(var(--slant-angle));
        margin-left: var(--slang-img-margin);
    }
}

/* Guest image (the last column) sits at the right edge of its column only while the columns are side by
 * side (the theme stacks them at 1024px); stacked, it aligns left like the recipe image. */
@media (min-width: 1025px) {
    .podcast-guest > .wp-block-columns > .wp-block-column:last-child {
        display: flex;
        justify-content: flex-end;
    }
}

.wp-block-read-more.is-style-primary,
.wp-block-read-more.is-style-outline,
.wp-block-read-more.is-style-secondary {
    display: inline-block;
    border-width: 2px;
    border-style: solid;
    border-radius: 102px;
    padding: 12px 32px;
    font-family: var(--wp--preset--font-family--montserrat);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

/* Primary — mirrors the default core/button */
.wp-block-read-more.is-style-primary {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}
.wp-block-read-more.is-style-primary:hover,
.wp-block-read-more.is-style-primary:focus {
    background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--background);
}

/* Outline — mirrors the core/button "outline" variation */
.wp-block-read-more.is-style-outline {
    background-color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}
.wp-block-read-more.is-style-outline:hover,
.wp-block-read-more.is-style-outline:focus {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}

/* Secondary — mirrors the core/button "secondary" variation */
.wp-block-read-more.is-style-secondary {
    background-color: var(--wp--preset--color--tertiary);
    border-color: var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--foreground);
}
.wp-block-read-more.is-style-secondary:hover,
.wp-block-read-more.is-style-secondary:focus {
    background-color: var(--wp--preset--color--tertiary-hover);
    border-color: var(--wp--preset--color--tertiary-hover);
}

/* Core enlarges a social icon on hover (.wp-block-social-link:hover -> scale(1.1)).
 * Mirror that on keyboard focus so tabbing to an icon gives the same visible cue.
 * :has() scales the <li> chip when its inner anchor is focus-visible; the transform
 * transition already lives on .wp-block-social-link in core (and is reduced-motion safe). */
.wp-block-social-link:has(:focus-visible) {
    transform: scale(1.1);
}

/* Libre Border - decorative block */
.wp-block-blockbase-child-libre-border {
    height: 134px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NyIgaGVpZ2h0PSIxMzQiIHZpZXdCb3g9IjAgMCA0NyAxMzQiIGZpbGw9Im5vbmUiPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTI0XzIyMzUzKSI+CjxyZWN0IHdpZHRoPSI0NyIgaGVpZ2h0PSIxMzMuMDgxIiBmaWxsPSIjMkI1NDlCIi8+CjxwYXRoIGQ9Ik00MS4zMjUyIDM1Ljk5NDRINDEuMzI3MUw0NS4xNDQ1IDM3LjQ5NjNMMzQuODk3NSAzOC41NjY3TDMzLjkyMjkgMzguNjY4MkwzNC41NzgxIDM5LjM5NzdMNDAuNTU3NiA0Ni4wNTQ5TDMxLjA5NjcgNDEuODU3N0wzMC4wMDU5IDQxLjM3MzNMMzAuNDI1OCA0Mi40OTA1TDM0LjQxMjEgNTMuMDkxMUwyNi42MTYyIDQ0LjQyMTFMMjUuOTA1MyA0My42MzAxTDI1Ljc1IDQ0LjY4MTlMMjMuNjE3MiA1OS4wNzM1TDIxLjQ4NjMgNDQuNjgxOUwyMS4zMzExIDQzLjYzMDFMMjAuNjIwMSA0NC40MjExTDEyLjgyMzIgNTMuMDkxMUwxNi44MDg2IDQyLjQ5MDVMMTcuMjI4NSA0MS4zNzMzTDE2LjEzNzcgNDEuODU3N0w2LjY3NzczIDQ2LjA1NDlMMTIuNjU3MiAzOS4zOTc3TDEzLjMxMjUgMzguNjY4MkwxMi4zMzY5IDM4LjU2NjdMMi4wODg4NyAzNy40OTU0TDUuOTU0MSAzNS45NzQ5QzkuMzEzNTcgMzYuNjUwOSAxMy44NzQ1IDM3LjM2NTMgMTkuMTY4IDM3LjY3MzFMMTcuNTEzNyAzOC44NzUyTDE1LjQwOTIgNDAuNDAyNkwxNC4xNjMxIDQxLjMwNjlIMjEuMzg1N0wyMy4xNDE2IDQ2LjcxMjJMMjMuNjE3MiA0OC4xNzVMMjQuMDkyOCA0Ni43MTIyTDI1Ljg1MDYgNDEuMzA2OUgzMy4wNzIzTDMxLjgyNjIgNDAuNDAyNkwyOC4wNjc0IDM3LjY3MzFDMzMuMzU5MSAzNy4zNjU0IDM3LjkyMDEgMzYuNjUwNyA0MS4yNzczIDM1Ljk3NDlMNDEuMzI1MiAzNS45OTQ0WiIgZmlsbD0iIzMzODlCNyIgc3Ryb2tlPSIjMzM4OUI3Ii8+CjxwYXRoIGQ9Ik0yNS43NDggMjQuNzkzMkwyNS45MDQzIDI1Ljg0NEwyNi42MTUyIDI1LjA1NEwzNC40MTAyIDE2LjM4NEwzMC40MjU4IDI2Ljk4NDZMMzAuMDA1OSAyOC4xMDE4TDMxLjA5NjcgMjcuNjE3NEw0MC41NTY2IDIzLjQxNzJMMzQuNTc3MSAzMC4wNzc0TDMzLjkyMTkgMzAuODA2OUwzNC44OTY1IDMwLjkwODRMNDUuMTQ0NSAzMS45Nzg4TDQxLjI3ODMgMzMuNDk5M0MzNy45MTg5IDMyLjgyMzMgMzMuMzU4OCAzMi4xMDg3IDI4LjA2NjQgMzEuODAxTDI5LjcyMTcgMzAuNTk5OUwzMS44MjUyIDI5LjA3MjVMMzMuMDcxMyAyOC4xNjgySDI1Ljg0OTZMMjQuMDkyOCAyMi43NjI5TDIzLjYxNzIgMjEuM0wyMy4xNDE2IDIyLjc2MjlMMjEuMzg0OCAyOC4xNjgySDE0LjE2MjFMMTUuNDA4MiAyOS4wNzI1TDE5LjE2NyAzMS44MDFDMTMuODc0NyAzMi4xMDg4IDkuMzEzMjkgMzIuODIzNCA1Ljk1NjA1IDMzLjQ5OTNMNS45MDkxOCAzMy40ODA3TDUuOTA4MiAzMy40Nzk3TDIuMDg5ODQgMzEuOTc3OEwxMi4zMzY5IDMwLjkwODRMMTMuMzEyNSAzMC44MDY5TDEyLjY1NzIgMzAuMDc3NEw2LjY3Njc2IDIzLjQxODJMMTYuMTM3NyAyNy42MTc0TDE3LjIyODUgMjguMTAxOEwxNi44MDg2IDI2Ljk4NDZMMTIuODIyMyAxNi4zODIxTDIwLjYxOTEgMjUuMDU0TDIxLjMzMDEgMjUuODQ0TDIxLjQ4NTQgMjQuNzkzMkwyMy42MTcyIDEwLjQwMTZMMjUuNzQ4IDI0Ljc5MzJaIiBmaWxsPSIjMzM4OUI3IiBzdHJva2U9IiMzMzg5QjciLz4KPHBhdGggZD0iTTE1MTEuMzMgMEg3NTZINzU1LjMzNUgwIiBzdHJva2U9IiMzMzg5QjciIHN0cm9rZS13aWR0aD0iMi41MDUiLz4KPHBhdGggZD0iTTM0Ljk0OTggMTA5LjYwNEw0Mi40OTIxIDExOC4wMDJMMzAuODk0MiAxMTIuODU1TDM1LjgxNDMgMTI1Ljk0TDI2LjI0NDIgMTE1LjI5NkwyMy42MTc1IDEzMy4wMjdMMjAuOTkyIDExNS4yOTZMMTEuNDIzIDEyNS45MzdMMTYuMzQwOSAxMTIuODU1TDQuNzQ0MDkgMTE4LjAwMkwxMi4yODUzIDEwOS42MDRMMCAxMDguMzIxTDUuOTA4NTMgMTA1Ljk5N0M5LjU1MTI4IDEwNi43MzYgMTQuNjU0IDEwNy41MzEgMjAuNTkxMyAxMDcuNzg3TDIwLjU5NTcgMTA3Ljc5NkwxNy44MDc1IDEwOS44MkwxNS43MDMzIDExMS4zNDdIMjEuNzQ5MUwyMy42MTc1IDExNy4wOThMMjUuNDg3MSAxMTEuMzQ3SDMxLjUzMjhMMjYuNjQwNCAxMDcuNzk2TDI2LjY0MzcgMTA3Ljc4N0MzMi41ODExIDEwNy41MzEgMzcuNjg2IDEwNi43MzYgNDEuMzI2NSAxMDUuOTk3TDQxLjUxMDMgMTA2LjA3TDQ3LjIzNTEgMTA4LjMyMUwzNC45NDk4IDEwOS42MDRaIiBmaWxsPSIjMzM4OUI3Ii8+CjxwYXRoIGQ9Ik0xMi4yODUzIDEwMC45NTJMNC43NDI5OSA5Mi41NTM3TDE2LjM0MDkgOTcuNzAwN0wxMS40MjA4IDg0LjYxNjNMMjAuOTkwOSA5NS4yNjAxTDIzLjYxNzUgNzcuNTNMMjYuMjQzMSA5NS4yNjAxTDM1LjgxMiA4NC42MTg1TDMwLjg5NDIgOTcuNzAwN0w0Mi40OTEgOTIuNTUzN0wzNC45NDg3IDEwMC45NTJMNDcuMjM1MSAxMDIuMjM1TDQxLjMyNjUgMTA0LjU1OUMzNy42ODM4IDEwMy44MiAzMi41ODExIDEwMy4wMjUgMjYuNjQzNyAxMDIuNzY5TDI2LjYzOTMgMTAyLjc2TDI5LjQyNzYgMTAwLjczNkwzMS41MzE3IDk5LjIwODNIMjUuNDg1OUwyMy42MTc1IDkzLjQ1ODFMMjEuNzQ4IDk5LjIwODNIMTUuNzAyMkwyMC41OTQ2IDEwMi43NkwyMC41OTEzIDEwMi43NjlDMTQuNjU0IDEwMy4wMjUgOS41NDkwNyAxMDMuODIgNS45MDg1MyAxMDQuNTU5TDUuNzI0NzkgMTA0LjQ4NkwwIDEwMi4yMzVMMTIuMjg1MyAxMDAuOTUyWiIgZmlsbD0iIzMzODlCNyIvPgo8cGF0aCBkPSJNMTUxMS4zMyA3MC41NDA1SDc1Nkg3NTUuMzM1SDAiIHN0cm9rZT0iIzMzODlCNyIgc3Ryb2tlLXdpZHRoPSIyLjUwNSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzUyNF8yMjM1MyI+CjxyZWN0IHdpZHRoPSI0NyIgaGVpZ2h0PSIxMzMuMDgxIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==");
    background-repeat: repeat-x;
    background-position: center;
}

/* Guest/Recipe description + image blocks (ACF-rendered; patterns/podcast-guest.php, podcast-recipe.php) */
.wp-block-blockbase-child-podcast-guest-bio > *,
.wp-block-blockbase-child-podcast-recipe-description > * {
    margin: 0;
}

.wp-block-blockbase-child-podcast-guest-bio > * + *,
.wp-block-blockbase-child-podcast-recipe-description > * + * {
    margin-top: var(--wp--preset--spacing--40);
}

.wp-block-blockbase-child-podcast-guest-image img,
.wp-block-blockbase-child-podcast-recipe-image img {
    width: 386px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;

    @media screen and (min-width: 1025px) {
        width: 486px;
    }
}

/* Buttons with an external-link icon after the label (SVG as a currentColor mask).
 * Add `has-external-icon` to a Button block; `.podcast-recipe-button` is the "View Recipe" button. */
.has-external-icon .wp-block-button__link::after,
.podcast-recipe-button .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1em;
    margin-left: 0.6em;
    vertical-align: -0.1em;
    background-color: currentColor;
    mask: url("../images/icon-external-link.svg") no-repeat center / contain;
    -webkit-mask: url("../images/icon-external-link.svg") no-repeat center / contain;
}

/* "Sun Background" style, Hides on mobile. */
.wp-block-group.is-style-sun-bg {
    @media screen and (min-width: 1024px) {
        background-image: url("../images/sun-graphic.svg");
        background-repeat: no-repeat;
        /* The SVG is a full sun; push it off the right edge so the group clips it
         * and only the left portion shows. The negative X offset is how much hangs
         * off-screen (~half the width ≈ a half sun). Tune size + offset to taste. */
        background-size: 700px auto;
        background-position: right -260px bottom;
    }
}
/* -----------------------------------------------------------------------------
 * Pattern Styles
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .podcast-landing-hero .wp-block-columns .wp-block-column:first-child {
        order: 2;
    }

    .podcast-landing-hero .wp-block-columns .wp-block-column:last-child {
        order: 1;
    }

    .listen-everywhere > .wp-block-group {
        gap: var(--wp--custom--gap--baseline);
    }

    /* Image first when stacked; DOM order stays heading → text → image. */
    .podcast-guest .wp-block-columns .wp-block-column:last-child {
        order: -1;
    }
}

/* -----------------------------------------------------------------------------
 * Template Parts
 * -------------------------------------------------------------------------- */

.podcast-footer {
    margin-top: 0;
}