/**
 * 電子報訂閱系統前台樣式（訂閱頁 / 確認頁 / 退訂頁 / 文章底部區塊 / 頁尾連結共用）。
 *
 * 命名慣例：一律 `.jex-newsletter-*` 前綴，全部使用 assets/css/common/variables.css
 * 提供的 M3 token，不寫死色碼與間距，維持全站設計系統一致。
 */

/* ==========================================
 * 共用工具
 * ========================================== */
.jex-newsletter-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 蜜罐欄位：一般使用者不可見，機器人爬蟲仍會填值 */
.jex-newsletter-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================
 * 獨立頁面版型（訂閱 / 確認 / 退訂）
 * ========================================== */
.jex-newsletter-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--md-sys-spacing-xl, 48px) var(--md-sys-spacing-lg, 24px);
}

.jex-newsletter-card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--jex-radius-lg, var(--md-sys-shape-corner-extra-large));
    box-shadow: var(--jex-shadow-md, var(--md-sys-elevation-2));
    padding: var(--md-sys-spacing-xl, 48px) var(--md-sys-spacing-lg, 24px);
}

.jex-newsletter-eyebrow {
    display: block;
    font-size: var(--md-sys-typescale-label-large-size, 14px);
    font-weight: var(--md-sys-typescale-label-large-weight, 600);
    color: var(--md-sys-color-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--md-sys-spacing-sm, 8px);
}

.jex-newsletter-title {
    font-size: var(--md-sys-typescale-headline-medium-size, 28px);
    font-weight: var(--md-sys-typescale-headline-medium-weight, 600);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 var(--md-sys-spacing-md, 16px);
    line-height: 1.3;
}

.jex-newsletter-lead {
    font-size: var(--md-sys-typescale-body-large-size, 16px);
    line-height: 1.7;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 var(--md-sys-spacing-lg, 24px);
}

/* ==========================================
 * 表單（訂閱頁大表單 / 文章底部小表單共用）
 * ========================================== */
.jex-newsletter-form {
    margin: 0;
}

.jex-newsletter-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--md-sys-spacing-sm, 8px);
    align-items: stretch;
}

.jex-newsletter-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 14px 16px;
    font-size: 16px;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-variant);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.jex-newsletter-input:focus {
    outline: none;
    background: var(--md-sys-color-surface);
    border-bottom-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary), transparent 75%);
}

.jex-newsletter-input::placeholder {
    color: var(--md-sys-color-outline);
}

.jex-newsletter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 14px 28px;
    font-size: var(--md-sys-typescale-label-large-size, 14px);
    font-weight: var(--md-sys-typescale-label-large-weight, 600);
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border: none;
    border-radius: var(--jex-radius-btn, var(--md-sys-shape-corner-full));
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.jex-newsletter-btn:hover:not(:disabled) {
    opacity: 0.9;
}

.jex-newsletter-btn:disabled {
    cursor: progress;
    opacity: 0.6;
}

.jex-newsletter-hint {
    margin-top: var(--md-sys-spacing-sm, 8px);
    font-size: var(--md-sys-typescale-body-small-size, 12px);
    color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================
 * 訊息區（成功 / 錯誤 / 提示）
 * ========================================== */
.jex-newsletter-message {
    display: none;
    margin-top: var(--md-sys-spacing-md, 16px);
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: 14px;
    line-height: 1.6;
}

.jex-newsletter-message.is-visible {
    display: block;
}

.jex-newsletter-message--success {
    background-color: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
    border: 1px solid var(--md-sys-color-success);
}

.jex-newsletter-message--error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 1px solid var(--md-sys-color-error);
}

/* ==========================================
 * 文章底部小型訂閱區塊
 * ========================================== */
.jex-newsletter-inline {
    margin: var(--md-sys-spacing-xl, 48px) 0 var(--md-sys-spacing-lg, 24px);
    padding: var(--md-sys-spacing-lg, 24px);
    background: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-variant));
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--jex-radius-md, var(--md-sys-shape-corner-medium));
}

.jex-newsletter-inline__title {
    margin: 0 0 var(--md-sys-spacing-sm, 8px);
    font-size: var(--md-sys-typescale-title-medium-size, 16px);
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.jex-newsletter-inline__desc {
    margin: 0 0 var(--md-sys-spacing-md, 16px);
    font-size: var(--md-sys-typescale-body-medium-size, 14px);
    color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================
 * 確認頁 / 退訂頁：狀態切換面板
 * ========================================== */
.jex-newsletter-state {
    display: none;
    text-align: center;
}

.jex-newsletter-state.is-visible {
    display: block;
}

.jex-newsletter-state__icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: var(--md-sys-spacing-md, 16px);
}

.jex-newsletter-state__title {
    font-size: var(--md-sys-typescale-title-large-size, 22px);
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 var(--md-sys-spacing-sm, 8px);
}

.jex-newsletter-state__desc {
    font-size: var(--md-sys-typescale-body-large-size, 16px);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.7;
    margin: 0 0 var(--md-sys-spacing-lg, 24px);
}

.jex-newsletter-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: var(--md-sys-typescale-label-large-size, 14px);
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border: none;
    border-radius: var(--jex-radius-btn, var(--md-sys-shape-corner-full));
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.jex-newsletter-cta:hover {
    opacity: 0.9;
    color: var(--md-sys-color-on-primary);
}

.jex-newsletter-cta--secondary {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.jex-newsletter-links {
    margin-top: var(--md-sys-spacing-lg, 24px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--md-sys-spacing-md, 16px);
    justify-content: center;
}

/* ==========================================
 * 頁尾連結
 * ========================================== */
.jex-newsletter-footer-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================
 * RWD
 * ========================================== */
@media (max-width: 600px) {
    .jex-newsletter-page {
        padding: var(--md-sys-spacing-lg, 24px) var(--md-sys-spacing-md, 16px);
    }

    .jex-newsletter-card {
        padding: var(--md-sys-spacing-lg, 24px) var(--md-sys-spacing-md, 16px);
    }

    .jex-newsletter-field-row {
        flex-direction: column;
    }

    .jex-newsletter-input,
    .jex-newsletter-btn {
        flex: 1 1 auto;
        width: 100%;
    }
}