/*
==========================================================
DOCUMENT & DETAILS (registered as customProgram) — document_details.css
==========================================================
WHAT IT IS:
One card for one offering — a class, service, membership,
event series or program — with its details and a document
visitors can open or download (BATCH_8_PLAN.md §39).

WHAT IT DOES:
Name, description, contact line, optional small label,
tappable phone / email and an extra button. The document
(uploaded file, web address or Business PDF) shows as a
tile on the left with a preview image or a drawn document
icon; it downloads (default) or opens in the browser.
Layout follows the block's own width: the tile moves under
the text in narrow spaces.

HOW TO USE:
1. Add the "Document & Details" block.
2. Details: the name (required) and description.
3. Contact & button / File: optional phone, email, extra
   button and the document.
4. Background and Advanced are optional.

No icon font is needed (the fallback icon is drawn in CSS).

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

.program_block {
    --pg-space-top: var(--space-8);
    --pg-space-bottom: var(--space-8);
    margin-top: var(--pg-space-top);
    margin-bottom: var(--pg-space-bottom);
}

/* Layout follows the block's own width (§39), not the window. */
.program_block_wrapper {
    container: program / inline-size;
}

.program_block_card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: ease all 300ms;
    position: relative;
    overflow: hidden;
}

/* (Corner triangle decoration removed — BATCH_8_PLAN.md §40.) */

/* Block inner */
.program_block_inner {
    padding: var(--space-8);
}

/* ── Document (§39 / §40 follow-up) ──────────────────────────
   A column beside the details: the preview image on its own, a clearly
   styled document button under it, and the file type / size on its own
   line under that. Nothing overlaps and no words sit on the image. The
   folded-corner decoration was removed (Matt, clean presentation). */
.program_block_card.has_doc {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    padding: var(--space-8);
}

.program_block_card.has_doc .program_block_inner {
    padding: 0;
}

.program_block_doc {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* Preview: the uploaded image, cropped from the top, never stretched; with
   no image, a simple drawn document on the brand colour. Mouse users can
   click it too; keyboard and screen-reader users get the button only. */
.program_block_doc_preview {
    display: block;
    position: relative;
    aspect-ratio: 14 / 17;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--color-accent);
}

.program_block_doc_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.program_block_doc_preview.no_thumbnail:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 46px;
    transform: translate(-50%, -50%);
    color: var(--color-bg-alt);
    border: 3px solid currentColor;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    background:
        linear-gradient(currentColor, currentColor) center 30% / 60% 3px no-repeat,
        linear-gradient(currentColor, currentColor) center 52% / 60% 3px no-repeat,
        linear-gradient(currentColor, currentColor) center 74% / 40% 3px no-repeat;
}

/* Document button: outlined, so it reads as a button and stays distinct
   from the filled extra button. */
.program_block_doc_btn {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 200ms, color 200ms, border-color 200ms;
}

.program_block_doc_btn:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
}

.program_block_doc_btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* File type and size: its own line under the button. */
.program_block_doc_meta {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    text-align: center;
}

/* Block content */
.program_block_inner h2 {
    color: var(--color-primary);
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 var(--space-4) 0;
    margin: 0 0 var(--space-4) 0;
}

.program_block_inner p {
    position: relative;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: var(--leading-relaxed);
    margin: var(--space-2) 0;
}

.program_block_inner p.program_block_contact {
    font-weight: var(--weight-bold);
}

.program_block_inner p:last-child {
    margin-bottom: 0;
}

/* Responsive — by the block's own width (619px ≈ the old 700px window
   step once page padding is taken off; 519px ≈ 600px). Narrow: the
   document goes under the details, a smaller preview above a full-width
   button. */
@container program (max-width: 619px) {
    .program_block_card.has_doc {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: var(--space-6);
    }
}

@container program (max-width: 519px) {
    .program_block_card.has_doc {
        grid-template-columns: minmax(0, 1fr);
    }

    .program_block_card.has_doc .program_block_doc {
        grid-row: 2;
    }

    .program_block_doc_preview {
        width: 120px;
        align-self: center;
    }
}

/* Browsers without container queries keep the window-based steps. */
@supports not (container-type: inline-size) {
    @media (max-width: 700px) {
        .program_block_card.has_doc {
            grid-template-columns: 120px minmax(0, 1fr);
            gap: var(--space-6);
        }
    }

    @media (max-width: 600px) {
        .program_block_card.has_doc {
            grid-template-columns: minmax(0, 1fr);
        }

        .program_block_card.has_doc .program_block_doc {
            grid-row: 2;
        }

        .program_block_doc_preview {
            width: 120px;
            align-self: center;
        }
    }
}

@media (max-width: 480px) {
    .program_block_inner,
    .program_block_card.has_doc {
        padding: var(--space-5);
    }
}

/* ==========================================================
   Batch 8H — Document & Details (BATCH_8_PLAN.md §39)
   Defaults reproduce the look before: no label, no phone/email,
   no extra button, no background.
   ========================================================== */

/* Screen-reader-only words (new tab). */
.program_block_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Small label above the name (two classes beat .program_block_inner p). */
.program_block_inner .program_block_label {
    margin: 0 0 var(--space-3) 0;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Label look: Rounded tag (shared §28 pattern).
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own. */
.program_block_inner .program_block_label.program_block_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* Tappable phone / email. */
.program_block_reach {
    list-style: none;
    margin: var(--space-3) 0 0 0;
    padding: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.program_block_reach a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

/* Extra button (theme's filled button).
   BOILERPLATE NOTE: essentials kept so the block works on its own. */
.program_block_inner .program_block_actions {
    margin: var(--space-5) 0 0 0;
}

.program_block_btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--weight-semi);
    line-height: 1;
    text-decoration: none;
}

.program_block_btn:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* ── Section background (shared six-choice pattern) ────────
   The card keeps its own light surface and text colours. */
.program_block.program_block_sbg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: max(var(--pg-space-top), var(--space-8));
    padding-bottom: max(var(--pg-space-bottom), var(--space-8));
}

.program_block_sbg_background     { background-color: var(--color-bg); }
.program_block_sbg_alt_background { background-color: var(--color-bg-alt); }
.program_block_sbg_dark           { background-color: var(--color-bg-dark); }
.program_block_sbg_accent         { background-color: var(--color-accent); }
.program_block_sbg_custom         { background-color: var(--program_block-section-bg, var(--color-bg)); }

/* On a Light alternate section the gray card gets the page colour. */
.program_block_sbg_alt_background .program_block_card {
    background: var(--color-bg);
}

/* ── Space above / below (shared standard) ───────────────── */
.program_block.program_block_space_top_none     { --pg-space-top: 0px; }
.program_block.program_block_space_top_small    { --pg-space-top: var(--space-4); }
.program_block.program_block_space_top_large    { --pg-space-top: var(--space-16); }
.program_block.program_block_space_bottom_none  { --pg-space-bottom: 0px; }
.program_block.program_block_space_bottom_small { --pg-space-bottom: var(--space-4); }
.program_block.program_block_space_bottom_large { --pg-space-bottom: var(--space-16); }

/* ── Editor-only messages ───────────────────────────────── */
.program_block_preview_empty,
.program_block_inner .program_block_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
}

.program_block_preview_empty {
    margin: var(--space-4) auto;
    text-align: center;
}

/* ==========================================================
   Content look + card background (BATCH_8_PLAN.md §40)
   Card (default) keeps the usual card; a chosen Card background fills it
   (and drops the gray border). Flat removes fill, border, shadow and radius;
   the content sits on the section background. program_block_on_dark is added when the
   surface directly behind the content is dark (a Dark / Brand / light-text
   custom card, or Flat on such a section): text, links, labels, dividers and
   focus outlines switch to light. program_block_on_accent: buttons stay visible on the
   brand colour. Card settings stay saved while Flat is chosen.
   ========================================================== */

.program_block_look_flat .program_block_card {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

.program_block_cbg_background .program_block_card { background-color: var(--color-bg); border-color: transparent; }
.program_block_cbg_alt_background .program_block_card { background-color: var(--color-bg-alt); border-color: transparent; }
.program_block_cbg_dark .program_block_card { background-color: var(--color-bg-dark); border-color: transparent; }
.program_block_cbg_accent .program_block_card { background-color: var(--color-accent); border-color: transparent; }
.program_block_cbg_custom .program_block_card { background-color: var(--program_block-card-bg, var(--color-bg-alt)); border-color: transparent; }

.program_block_on_dark .program_block_inner h2 {
    color: var(--color-text-inverse);
    border-bottom-color: color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}

.program_block_on_dark .program_block_inner p {
    color: var(--color-text-inverse-soft);
}

.program_block_on_dark .program_block_inner p.program_block_contact,
.program_block_on_dark .program_block_inner .program_block_label,
.program_block_on_dark .program_block_reach a {
    color: var(--color-text-inverse);
}

.program_block_on_dark .program_block_doc_btn:focus-visible,
.program_block_on_dark .program_block_btn:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
}

/* The document button and its type / size line sit on the card's surface. */
.program_block_on_dark .program_block_doc_btn {
    background-color: transparent;
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

.program_block_on_dark .program_block_doc_btn:hover {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

.program_block_on_dark .program_block_doc_meta {
    color: var(--color-text-inverse-muted);
}

/* On the brand colour: the brand-colour preview gets a light outline, and
   the filled button turns light, so neither vanishes. */
.program_block_on_accent .program_block_doc_preview {
    box-shadow: 0 0 0 2px var(--color-text-inverse);
}

.program_block_on_accent .program_block_doc_btn:hover {
    color: var(--color-accent);
}

.program_block_on_accent .program_block_btn {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-accent);
}

.program_block_on_accent .program_block_btn:hover {
    background-color: var(--color-text-inverse-soft);
    border-color: var(--color-text-inverse-soft);
    color: var(--color-accent);
}