/**
 * ============================================
 * MODULE: Article Study Download
 * LOCATION: /public/templates/t1/modules/article_study_download/style.css
 * ============================================
 * Article-style aesthetics (light/neutral) matching article_contact_form.
 * All classes namespaced t1-study-download__* — safe for multiple instances
 * on one page. No IDs used for targeting.
 */

/* --- Container ------------------------------------------------------------ */
.t1-study-download {
    position: relative;
    margin: 2rem 0;
}

.t1-study-download__header {
    margin-bottom: 1.5rem;
}

.t1-study-download__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

.t1-study-download__description {
    font-size: 1rem;
    color: var(--charcoal);
    line-height: 1.6;
}
.t1-study-download__description > :first-child { margin-top: 0; }
.t1-study-download__description > :last-child { margin-bottom: 0; }

/* --- Forms ---------------------------------------------------------------- */
.t1-study-download__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.t1-study-download__form[hidden] { display: none; }

.t1-study-download__form-subheading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.t1-study-download__form-description {
    font-size: 0.9375rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.t1-study-download__form-description > :first-child { margin-top: 0; }
.t1-study-download__form-description > :last-child { margin-bottom: 0; }

/* --- Fields --------------------------------------------------------------- */
.t1-study-download__field { display: block; }

.t1-study-download__label-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 0.375rem;
}

.t1-study-download__input,
.t1-study-download__code-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--pearl);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.t1-study-download__input:focus,
.t1-study-download__code-input:focus {
    outline: none;
    border-color: var(--jade);
    box-shadow: 0 0 0 3px rgba(0, 135, 108, 0.1);
}

/* Positive feedback on a valid entry (mirrors article_contact_form). */
.t1-study-download__input:valid,
.t1-study-download__code-input:valid {
    border-color: var(--jade);
}

/* Only flag invalid AFTER interaction — never on first paint. */
.t1-study-download__input:focus:invalid,
.t1-study-download__input:user-invalid {
    border-color: #c53030;
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1);
}

/* Code input: prominent, monospace, tracked */
.t1-study-download__code-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-align: center;
    padding-left: calc(1rem + 0.5em);
}

/* --- Consent -------------------------------------------------------------- */
.t1-study-download__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--pearl);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

/* Positive (never punitive) feedback when consent is given.
   JS adds --ticked; the :has() selector covers JS-disabled browsers. */
.t1-study-download__consent--ticked,
.t1-study-download__consent:has(.t1-study-download__consent-input:checked) {
    border-color: var(--jade);
    background: var(--jade-light);
}

.t1-study-download__consent-input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    accent-color: var(--jade);
    cursor: pointer;
}

.t1-study-download__consent-label {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.5;
}

.t1-study-download__consent-note {
    font-size: 0.8125rem;
    color: var(--charcoal);
    margin: 0;
    padding: 0 1rem;
}

/* --- Actions -------------------------------------------------------------- */
.t1-study-download__code-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.t1-study-download__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--jade);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.t1-study-download__submit:hover { background: var(--jade-dark); }
.t1-study-download__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.t1-study-download__resend {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--jade);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.t1-study-download__resend:hover { background: var(--jade-light); }
.t1-study-download__resend:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Countdown ------------------------------------------------------------ */
.t1-study-download__countdown {
    font-size: 0.875rem;
    color: var(--charcoal);
    min-height: 1.25em;
}
.t1-study-download__countdown[data-state="expired"] { color: #c53030; }

/* --- Inline error output (created by JS) ---------------------------------- */
.t1-study-download__output {
    padding: 0.75rem 1rem;
    background: #fed7d7;
    color: #9b2c2c;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin: 0;
}

/* --- Success state -------------------------------------------------------- */
.t1-study-download__success { text-align: center; padding: 2.5rem 1.5rem; }
.t1-study-download__success[hidden] { display: none; }

.t1-study-download__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--jade-light);
    color: var(--jade-dark);
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 700;
}

.t1-study-download__success-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

.t1-study-download__success-message {
    font-size: 1rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.t1-study-download__success-message > :first-child { margin-top: 0; }
.t1-study-download__success-message > :last-child { margin-bottom: 0; }

/* --- Honeypot (visually + AT hidden, still focusable for bots) ------------ */
.t1-study-download__meta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Admin misconfiguration notice ---------------------------------------- */
.t1-study-download--error {
    padding: 1rem;
    background: #fed7d7;
    color: #9b2c2c;
    border: 1px solid #c53030;
    border-radius: var(--radius-md);
}

/* --- Variants ------------------------------------------------------------- */
.t1-study-download--card {
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.t1-study-download--minimal { padding: 0; }
.t1-study-download--minimal .t1-study-download__input,
.t1-study-download--minimal .t1-study-download__code-input {
    border-color: transparent;
    background: var(--pearl);
}

/* --- Side image layout ---------------------------------------------------- */
/* Layout wrapper exists in the DOM always; it only becomes a grid when one
   of the image-position modifiers is on the module root. With no image,
   __main is the only child and the wrapper sits transparent. */
.t1-study-download__layout {
    /* default: block flow, children stack naturally */
}

.t1-study-download__aside {
    margin: 0;
}
.t1-study-download__aside-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.t1-study-download__aside-caption {
    font-size: 0.8125rem;
    color: var(--charcoal);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* On mobile, image-LEFT puts the aside above the form (preserves the desktop
   "image-first" hierarchy intent). image-RIGHT keeps DOM order: form first,
   image below. */
.t1-study-download--image-left .t1-study-download__layout {
    display: flex;
    flex-direction: column;
}
.t1-study-download--image-left .t1-study-download__aside { order: 1; margin-bottom: 1.5rem; }
.t1-study-download--image-left .t1-study-download__main  { order: 2; }
.t1-study-download--image-right .t1-study-download__aside { margin-top: 1.5rem; }

@media (min-width: 768px) {
    /* Two-column grid for all image layouts. CSS variables carry the column
       ratio so a single size modifier on the root controls both positions. */
    .t1-study-download--image-left .t1-study-download__layout,
    .t1-study-download--image-right .t1-study-download__layout {
        display: grid;
        gap: 2rem;
        align-items: start;
        /* Default ratio = medium (overridden by size modifiers below) */
        --jdm-img-col: 1fr;
        --jdm-form-col: 2fr;
    }

    /* Size modifiers — set the two column-width variables */
    .t1-study-download--image-size-small .t1-study-download__layout  { --jdm-img-col: 1fr; --jdm-form-col: 3fr; }
    .t1-study-download--image-size-medium .t1-study-download__layout { --jdm-img-col: 1fr; --jdm-form-col: 2fr; }
    .t1-study-download--image-size-large .t1-study-download__layout  { --jdm-img-col: 1fr; --jdm-form-col: 1fr; }

    /* Position determines which side gets the image column.
       image-right: form first (DOM order), image second.
       image-left: same DOM order, but order: 1/2 swaps visual placement. */
    .t1-study-download--image-right .t1-study-download__layout {
        grid-template-columns: var(--jdm-form-col) var(--jdm-img-col);
    }
    .t1-study-download--image-left .t1-study-download__layout {
        grid-template-columns: var(--jdm-img-col) var(--jdm-form-col);
    }
    .t1-study-download--image-left .t1-study-download__aside { order: 1; }
    .t1-study-download--image-left .t1-study-download__main  { order: 2; }

    /* Reset mobile stacking margins now that grid gap handles spacing */
    .t1-study-download--image-left .t1-study-download__aside,
    .t1-study-download--image-right .t1-study-download__aside {
        margin: 0;
    }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 599px) {
    .t1-study-download--card { padding: 1.5rem; }

    .t1-study-download__code-input {
        font-size: 1.25rem;
        letter-spacing: 0.35em;
    }

    .t1-study-download__code-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .t1-study-download__submit,
    .t1-study-download__resend { width: 100%; }
}