/*
 * The card's own design system.
 *
 * This file used to be three lines painting the body skyblue: every visual
 * decision lived inline in base.html.twig on top of stock Bootstrap, which is
 * why the published card read as a prototype. Everything a card renders now
 * resolves through the tokens below, so a theme changes one set of custom
 * properties and the whole page follows — buttons, spacing, type and all.
 *
 * Precedence, from weakest to strongest:
 *   1. the tokens here          (the product's own defaults)
 *   2. the theme                (_card_theme.html.twig, scoped to the card)
 *   3. the card's accent colour (Card::accentColor)
 *   4. the block's own style    (inline --cta-* custom properties)
 */

/* ---------------------------------------------------------------- tokens */
:root {
    --card-ink: #16181d;
    --card-ink-soft: #5b6470;
    --card-surface: #ffffff;
    --card-surface-2: #f4f5f3;
    --card-line: rgba(22, 24, 29, .12);
    --card-accent: var(--brand-primary, #2563eb);

    --card-space: 12px;
    --card-radius: 14px;
    --card-width: 620px;

    --card-label-size: 15px;
    --card-sub-size: 12.5px;
    --card-weight: 600;

    --cta-min-height: 56px;
    --cta-pad-x: 18px;
}

/* ------------------------------------------------------------ the sheet */
.card-sheet {
    position: relative;
    isolation: isolate;
    max-width: var(--card-width);
    margin-inline: auto;
    padding: 28px 18px 72px;
    color: var(--card-text-color, var(--card-ink));
    font-family: var(--card-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--card-space);
    text-align: center;
}

.card-sheet__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--card-radius) + 4px);
}

/* The avatar overlaps the cover when there is one, which is what makes the
   header read as one object instead of two stacked images. */
.card-sheet__cover + .card-sheet__avatar,
.card-sheet__cover + .card-sheet__avatar-initials {
    margin-top: -52px;
}

.card-sheet__avatar,
.card-sheet__avatar-initials {
    width: var(--card-avatar-size, 104px);
    height: var(--card-avatar-size, 104px);
    object-fit: cover;
    border-radius: var(--card-avatar-radius, 50%);
    border: 4px solid var(--card-bg-color, var(--card-surface));
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5);
    background: var(--card-accent);
}

.card-sheet__avatar-initials {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.card-sheet__title {
    font-family: var(--card-heading-font, var(--card-font, inherit));
    font-size: clamp(22px, 5.5vw, 27px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 6px 0 0;
    text-wrap: balance;
}

.card-sheet__subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--card-accent);
    letter-spacing: .01em;
}

.card-sheet__bio {
    margin: 0;
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.55;
    opacity: .85;
}

.card-sheet__exports {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 8px;
}

.card-sheet__export {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    opacity: .7;
    transition: opacity .18s ease, transform .18s ease;
}

.card-sheet__export:hover { opacity: 1; transform: translateY(-1px); color: inherit; }

/* BKG-02: full width. The sheet spans the screen, so its background and the
   theme's ground cover it edge to edge, while the content keeps a readable
   measure in the middle -- the old MY's 8-of-12 column. */
.card-sheet--wide {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding-inline: max(18px, calc((100% - 760px) / 2));
}

/* BLK-36: the row of icon-only links under the header. */
.card-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin: 6px 0 4px;
}

.card-icons__link {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, opacity .18s ease;
}

.card-icons__link:hover,
.card-icons__link:focus-visible { transform: translateY(-2px) scale(1.06); color: inherit; opacity: .85; text-decoration: none; }
.card-icons__img { width: 32px; height: 32px; object-fit: contain; }

/* The blocks: a two-column grid so a "half width" button can sit beside
   another one, and every full-width block spans both tracks. */
.card-blocks {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--card-space);
    text-align: left;
}

.card-blocks > * { grid-column: span 2; min-width: 0; }
.card-blocks > .tt-block--half,
.card-blocks > *:has(> .tt-block--half) { grid-column: span 1; }

/* BKG-01: the card's own background image, layered over the theme's ground
   and under everything else. Painted by custom properties the owner sets. */
.card-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--card-bgimg, none);
    background-size: var(--card-bgimg-size, cover);
    background-position: var(--card-bgimg-position, center);
    background-repeat: var(--card-bgimg-repeat, no-repeat);
    background-attachment: var(--card-bgimg-attachment, scroll);
    opacity: var(--card-bgimg-opacity, 1);
}

/* ----------------------------------------------------------- the button */
.cta {
    --cta-bg: var(--card-button-color, var(--card-accent));
    --cta-fg: #ffffff;
    --cta-border: transparent;
    --cta-border-w: 0px;
    --cta-radius: var(--card-button-radius, var(--card-radius));
    --cta-weight: var(--card-weight);
    --cta-label-size: var(--card-label-size);
    --cta-image-opacity: 1;
    /* The offset shadow is drawn on the card, so it takes the card's ink —
       `currentColor` would paint a white shadow under a white label. */
    --cta-hard-shadow: var(--card-text-color, var(--card-ink));

    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    min-height: var(--cta-min-height);
    padding: 0;
    border: var(--cta-border-w) solid var(--cta-border);
    border-radius: var(--cta-radius);
    background: var(--cta-bg);
    color: var(--cta-fg);
    font-family: var(--cta-font, inherit);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta:hover, .cta:focus-visible { color: var(--cta-fg); }
.cta:focus-visible { outline: 3px solid var(--cta-fg); outline-offset: 2px; }

.cta__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--cta-min-height);
    padding: 10px var(--cta-pad-x);
}

.cta__icon {
    flex: none;
    width: 30px;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.cta__icon-img, .cta__thumb {
    flex: none;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 9px;
}

.cta__labels { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.cta__label {
    font-size: var(--cta-label-size);
    font-weight: var(--cta-weight);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Underlining the button would rule a line under the supporting text, the
   badge and the chevron as well, and stretch it the full width. It is the
   label that gets underlined. */
.cta--underline .cta__label,
.cta--underline .tt-block__title {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

/* Nothing inside the card carries a browser default underline either: the
   button is the link, and an underline under a whole row reads as a defect. */
.card-sheet a { text-decoration: none; }
.card-sheet a:not(.cta):not(.card-sheet__export):not(.card-icons__link):hover { text-decoration: underline; }

.cta__sub {
    font-size: var(--card-sub-size);
    line-height: 1.3;
    opacity: .72;
    overflow-wrap: anywhere;
}

.cta__badge {
    flex: none;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: inherit;
}

.cta__chevron { flex: none; margin-left: auto; opacity: .45; font-size: 12px; }
.cta__badge + .cta__chevron { margin-left: 0; }

/* The background image sits behind the label at its own opacity, so text
   never has to compete with a photo at full strength. */
.cta--has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cta-image);
    background-size: cover;
    background-position: center;
    opacity: var(--cta-image-opacity);
}

.cta--has-image .cta__body { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

/* --- fills ------------------------------------------------------------ */
.cta--outline {
    background: transparent;
    color: var(--cta-fg-custom, var(--cta-bg));
    border-width: max(var(--cta-border-w), 2px);
    border-color: var(--cta-border, currentColor);
}
.cta--outline .cta__badge { background: color-mix(in srgb, currentColor 18%, transparent); }

.cta--soft {
    background: color-mix(in srgb, var(--cta-bg) 16%, transparent);
    color: var(--cta-fg-custom, var(--cta-text-on-soft, inherit));
}

.cta--glass {
    /* A picked colour tints the glass; without one it stays frosted white. */
    background: color-mix(in srgb, var(--cta-bg-custom, rgba(255, 255, 255, .16)) 28%, rgba(255, 255, 255, .12));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .32);
    color: var(--cta-fg-custom, inherit);
}

/* A hard offset shadow instead of a blur — the button reads as a physical
   object, which is the whole point of the style. */
.cta--hard {
    box-shadow: 5px 5px 0 var(--cta-hard-shadow);
    border: 2px solid var(--cta-hard-shadow);
}

.cta--brand { background: var(--cta-bg-custom, var(--cta-brand)); color: var(--cta-fg-custom, #fff); }

/* --- layouts ---------------------------------------------------------- */
.cta--centered .cta__body { justify-content: center; text-align: center; }
.cta--centered .cta__labels { align-items: center; }
.cta--centered .cta__chevron { display: none; }
.cta--centered .cta__badge { margin-left: 8px; }

.cta--stacked .cta__body { flex-direction: column; text-align: center; padding-block: 16px; }
.cta--stacked .cta__icon { font-size: 24px; width: auto; }
.cta--stacked .cta__labels { align-items: center; }
.cta--stacked .cta__chevron { display: none; }
.cta--stacked .cta__badge { margin-left: 0; }

.cta--cover .cta__body { flex-direction: column; align-items: stretch; }
.cta__cover { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* --- sizes ------------------------------------------------------------ */
.cta--sm { --cta-min-height: 44px; --cta-label-size: 13.5px; --cta-pad-x: 14px; }
.cta--lg { --cta-min-height: 68px; --cta-label-size: 17px; --cta-pad-x: 22px; }

/* --- shadow and hover ------------------------------------------------- */
.cta--shadow-sm { box-shadow: 0 1px 3px rgba(17, 24, 39, .18); }
.cta--shadow-md { box-shadow: 0 8px 20px -8px rgba(17, 24, 39, .42); }
.cta--shadow-lg { box-shadow: 0 18px 38px -14px rgba(17, 24, 39, .55); }

.cta--hover-lift:hover { transform: translateY(-3px); }
.cta--hover-grow:hover { transform: scale(1.025); }
.cta--hover-glow:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta-bg) 40%, transparent); }
.cta--hover-pulse:hover { animation: cta-pulse 1.1s ease-in-out infinite; }

@keyframes cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* --- entrance --------------------------------------------------------- */
/* Each runs once, from a visible resting state: a block that never animates
   (a stalled load, a bot, a print) is still readable. */
.cta--in-fade { animation: cta-in-fade .5s ease both; }
.cta--in-slide { animation: cta-in-slide .5s cubic-bezier(.2, .8, .2, 1) both; }
.cta--in-zoom { animation: cta-in-zoom .45s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes cta-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cta-in-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cta-in-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* --- attention -------------------------------------------------------- */
.cta--attn-wiggle { animation: cta-wiggle 4s ease-in-out infinite; }
.cta--attn-beat { animation: cta-beat 3.2s ease-in-out infinite; }
.cta--attn-shine::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -40%;
    z-index: 2;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    animation: cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cta-wiggle {
    0%, 84%, 100% { transform: rotate(0); }
    88% { transform: rotate(-1.4deg); }
    92% { transform: rotate(1.4deg); }
    96% { transform: rotate(-.7deg); }
}
@keyframes cta-beat { 0%, 88%, 100% { transform: scale(1); } 93% { transform: scale(1.035); } }
@keyframes cta-shine { 0%, 60% { left: -40%; } 100% { left: 140%; } }

/* ------------------------------------------------- content-block frame */
.tt-block { min-width: 0; }
/* A content block — an embed, a gallery, a form — answers to the same hover
   and shadow classes a button does, so the card behaves as one system. */
.tt-block[class*="cta--hover-"] { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.tt-block__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; }
.tt-block__icon { font-size: 17px; }
.tt-block__icon-img { width: 28px; height: 28px; object-fit: cover; border-radius: 7px; }
.tt-block__labels { display: flex; flex-direction: column; min-width: 0; }
.tt-block__title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.tt-block__description { font-size: 12.5px; opacity: .75; }

/* Embeds, galleries and forms share the button's corner radius so the page
   reads as one family of objects. */
.tt-block .ratio,
.tt-block iframe,
.tt-block img { border-radius: var(--card-radius); }

.tt-block form .form-control { border-radius: calc(var(--card-radius) - 4px); }

.tt-block .btn-primary {
    background: var(--card-button-color, var(--card-accent));
    border-color: var(--card-button-color, var(--card-accent));
    border-radius: var(--card-button-radius, var(--card-radius));
    min-height: 44px;
    font-weight: 600;
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    .cta,
    .cta[class*="cta--in-"],
    .cta[class*="cta--attn-"],
    .cta--hover-pulse:hover {
        animation: none !important;
        transition: none !important;
    }

    .cta--attn-shine::after { display: none; }
    .cta--hover-lift:hover, .cta--hover-grow:hover { transform: none; }
    .card-sheet__export:hover { transform: none; }
}

/* A content block that was given a corner radius passes it to the embed,
   the gallery or the form inside it — they all read `--card-radius`. */
.tt-block--rounded { border-radius: var(--card-radius); overflow: hidden; }

/* ------------------------------------------------------- the lead gate */
/* BLK-35: the button opens a short form in place instead of linking out.
   A <details>, so it works with no JavaScript at all. */
.cta-gate { display: block; }
.cta-gate > summary { display: block; list-style: none; cursor: pointer; }
.cta-gate > summary::-webkit-details-marker { display: none; }
.cta-gate[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cta-gate[open] > summary .cta__chevron { transform: rotate(90deg); }

.cta-gate__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--card-line);
    border-top: 0;
    border-radius: 0 0 var(--cta-radius, var(--card-radius)) var(--cta-radius, var(--card-radius));
    background: var(--card-surface);
    color: var(--card-ink);
}

.cta-gate__note { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.cta-gate__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.4; }
.cta-gate__consent input { margin-top: 2px; flex: none; }

/* ------------------------------------------- content inside the sheet */
/* Bootstrap's utility greys are fixed values: `.text-muted` is a mid grey that
   disappears on a dark or saturated theme. Inside the card everything takes
   the theme's own ink, dimmed. */
.card-sheet .text-muted,
.card-sheet figcaption,
.card-sheet .small {
    color: inherit !important;
    opacity: .78;
}

/* A header block is the card's own section title, so it follows the theme's
   display face like the card's title does. */
.block-title {
    font-family: var(--card-heading-font, var(--card-font, inherit));
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 8px 0 2px;
}

.block-subtitle { margin: 0; font-size: 13.5px; opacity: .78; }

/* A form on the card is read on the theme's ground: its own fields keep a
   readable surface instead of borrowing the page's colours. */
.card-sheet .form-control,
.card-sheet textarea {
    background: var(--card-surface);
    color: var(--card-ink);
    border-color: var(--card-line);
}

.card-sheet .form-control::placeholder { color: var(--card-ink-soft); opacity: 1; }

/* BLK-PIX: QR code, "copia e cola" and the key. */
.block-pix { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.block-pix__qr { width: min(220px, 70vw); padding: 10px; background: #fff; border-radius: 12px; }
.block-pix__qr svg { display: block; width: 100%; height: auto; }
.block-pix__who { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.block-pix__amount { font-size: 1.15rem; font-weight: 700; }
.block-pix__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.block-pix__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }


/* ------------------------------------------------------ CLS-01: classic
 * The old MY's page, drawn on the same markup: its system font, the header's
 * shadowed type, the icon row above the bio, and pill buttons with a light
 * 2px rim and a bold centred label. Only the defaults move -- a colour, a
 * radius or a border the owner set on one button still wins, because those
 * arrive inline on the button itself.
 */
.card-sheet__title { color: var(--card-header-color, inherit); }
.card-sheet__subtitle { color: var(--card-header-color, var(--card-accent)); }
.card-sheet__bio { color: var(--card-bio-color, inherit); background: var(--card-bio-bg, transparent); }

.card-sheet--classic {
    --card-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --card-heading-font: var(--card-font);
    gap: 0;
    padding: 20px 0 48px;
    line-height: 1.6;
    font-family: var(--card-font);
}

.card-sheet--classic.card-sheet--wide { padding-inline: max(0px, calc((100% - 1000px) / 2)); }

.card-sheet--classic .card-sheet__avatar {
    width: 150px;
    height: 150px;
    border: 0;
    box-shadow: none;
    background: none;
}

.card-sheet--classic.card-sheet--logo-original .card-sheet__avatar {
    width: auto;
    max-width: calc(100% - 40px);
    border-radius: 0;
}

.card-sheet--classic .card-sheet__avatar-initials { width: 150px; height: 150px; border: 0; font-size: 3rem; }

.card-sheet--classic .card-sheet__title {
    width: 100%;
    padding-inline: 20px;
    margin: 0 0 .5rem;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--card-header-color, #111111);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
    text-wrap: wrap;
}

.card-sheet--classic .card-sheet__avatar + .card-sheet__title,
.card-sheet--classic .card-sheet__avatar-initials + .card-sheet__title { margin-top: 4px; }

.card-sheet--classic .card-sheet__subtitle {
    width: 100%;
    padding-inline: 20px;
    margin: 0 0 16px;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: normal;
    opacity: .9;
    color: var(--card-header-color, #111111);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.card-sheet--flat .card-sheet__title,
.card-sheet--flat .card-sheet__subtitle { text-shadow: none; }

.card-sheet--classic .card-icons {
    width: calc(83.333% - 24px);
    gap: 0;
    margin: 36px 0 16px;
    color: var(--card-header-color, #111111);
}

.card-sheet--classic .card-icons__link { width: auto; height: auto; padding: 0 8px; font-size: 2em; }
.card-sheet--classic .card-icons__link:hover { transform: translateY(-3px) scale(1.02); opacity: 1; }

.card-sheet--classic .card-sheet__bio {
    width: calc(83.333% - 24px);
    max-width: none;
    margin: 24px 0;
    padding: 20px;
    border-radius: 20px;
    font-size: 1.1em;
    line-height: 1.6;
    opacity: 1;
}

.card-sheet--classic .card-blocks {
    width: calc(83.333% - 20px);
    gap: 16px;
    min-height: 70vh;
    align-content: start;
}

.card-sheet--classic .card-blocks .tt-block { padding: 0; }

.card-sheet--classic .cta {
    --cta-radius: 2rem;
    --cta-border-w: 2px;
    --cta-border: #dee2e6;
    --cta-weight: 700;
    --cta-label-size: 16px;
    --cta-min-height: 0px;
    transition: all .2s ease;
}

.card-sheet--classic .cta__body {
    justify-content: center;
    gap: 0;
    padding: 16px;
    text-align: center;
    line-height: 1.6;
}

.card-sheet--classic .cta__labels { align-items: center; gap: 0; }
.card-sheet--classic .cta__label { line-height: 1.6; }
.card-sheet--classic .cta__icon,
.card-sheet--classic .cta__icon-img,
.card-sheet--classic .cta__chevron,
.card-sheet--classic .cta__sub--auto { display: none; }

.card-sheet--classic .cta__sub {
    font-size: 12.8px;
    line-height: 1.6;
    color: var(--card-text-color, #222222);
    opacity: .7;
}

.card-sheet--classic .cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
}

.card-sheet--classic .cta:active {
    transform: translateY(-1px) scale(.98);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}

.card-sheet--classic .cta-gate__form { border-radius: 0 0 20px 20px; text-align: center; }
.card-sheet--classic .cta-gate > summary.cta { display: block; }

.card-sheet__qr {
    margin-top: 24px;
    font-size: 2em;
    color: var(--card-text-color, #222222);
    opacity: .7;
}

.card-sheet__qr:hover { opacity: 1; color: var(--card-text-color, #222222); }

@media (prefers-reduced-motion: reduce) {
    .card-sheet--classic .cta:hover,
    .card-sheet--classic .cta:active,
    .card-sheet--classic .card-icons__link:hover { transform: none; }
}