/* PetFoodies 佈景 - 評選辦法 contest_rules 頁 */
    .contest-container { max-width: 1000px; margin: 0 auto; }

    /* ====== 活動標題區 ====== */
    .event-header {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-top: 4px solid var(--primary);
        color: var(--text);
        padding: 2.5rem 2rem;
        border-radius: 4px;
        text-align: center;
        margin-bottom: 2.5rem;
        box-shadow: var(--shadow-sm);
    }
    .event-title {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: .85rem;
        color: var(--primary);
    }
    .event-title::after {
        content: ''; display: block;
        width: 50px; height: 3px; background: var(--accent);
        margin: .85rem auto 0;
    }
    .event-period {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 1px;
        color: var(--text);
        margin-bottom: .5rem;
    }
    .event-subtitle {
        font-size: .95rem;
        color: var(--text-muted);
        line-height: 1.75;
    }

    /* ====== 區段 ====== */
    .content-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 2.5rem;
        margin-bottom: 1.5rem;
        line-height: 1.85;
        box-shadow: var(--shadow-sm);
    }
    .content-section h3 {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.35rem;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--border-soft);
        display: flex;
        align-items: center;
    }
    .content-section h3 i { color: var(--accent); margin-right: .35rem; }
    .content-section h4 {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 600;
        font-size: 1.15rem;
        letter-spacing: .5px;
        margin: 1.75rem 0 .85rem;
    }
    .content-section p {
        font-size: 1rem;
        color: var(--text);
        margin-bottom: 1.1rem;
        text-align: justify;
    }

    /* ====== 重點框（資訊框） ====== */
    .highlight-box {
        background: var(--bg);
        border: 1px solid var(--border);
        border-left: 3px solid var(--primary);
        padding: 1.5rem 1.75rem;
        border-radius: 4px;
        margin: 1.5rem 0;
    }
    .highlight-title {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 1px;
        margin-bottom: .85rem;
        display: flex; align-items: center;
    }
    .highlight-title i { color: var(--accent); margin-right: .35rem; }

    /* ====== 評選流程框 ====== */
    .evaluation-process {
        background: var(--bg);
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent);
        padding: 1.5rem 1.75rem;
        border-radius: 4px;
        margin: 1.5rem 0;
    }
    .process-title {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 1px;
        margin-bottom: .85rem;
        display: flex; align-items: center;
    }
    .process-title i { color: var(--accent); margin-right: .35rem; }

    /* ====== Timeline 時間軸 ====== */
    .timeline {
        position: relative;
        padding: 1.5rem 0 .5rem;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 18px; top: 0; bottom: 0;
        width: 2px;
        background: var(--border);
    }
    .timeline-item {
        position: relative;
        padding-left: 60px;
        margin-bottom: 1.5rem;
    }
    .timeline-marker {
        position: absolute;
        left: 8px; top: .25rem;
        width: 22px; height: 22px;
        background: var(--primary);
        border: 2px solid var(--accent);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: .78rem;
    }
    .timeline-content {
        background: var(--bg-card);
        padding: 1.25rem 1.5rem;
        border: 1px solid var(--border);
        border-left: 3px solid var(--primary);
        border-radius: 4px;
        box-shadow: var(--shadow-sm);
    }
    .timeline-title {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 1px;
        margin-bottom: .5rem;
    }

    /* ====== 評選指標卡片 ====== */
    .criteria-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        margin: 1.75rem 0;
    }
    .criteria-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 1.75rem;
        text-align: center;
        transition: border-color .15s, transform .15s, box-shadow .15s;
    }
    .criteria-card:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
        box-shadow: var(--shadow-md);
    }
    .criteria-icon {
        font-size: 2.4rem;
        color: var(--accent);
        margin-bottom: .85rem;
    }
    .criteria-title {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 1px;
        margin-bottom: .75rem;
    }
    .criteria-desc {
        color: var(--text-muted);
        font-size: .92rem;
        line-height: 1.7;
    }

    /* ====== 行動呼籲區（CTA） ====== */
    .action-section {
        background: var(--primary);
        color: #fff;
        padding: 2.5rem 2rem;
        border-radius: 4px;
        text-align: center;
        margin: 2.5rem 0;
        border-top: 3px solid var(--accent);
    }
    .action-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 2px;
        color: #fff;
        margin-bottom: .75rem;
    }
    .action-subtitle {
        font-size: .98rem;
        margin-bottom: 1.75rem;
        color: rgba(255,255,255,.85);
        line-height: 1.75;
    }
    .action-buttons {
        display: flex; gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .btn-action {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,.5);
        padding: .75rem 1.75rem;
        border-radius: 4px;
        font-weight: 500;
        font-size: .98rem;
        letter-spacing: 1px;
        text-decoration: none;
        transition: background-color .2s, border-color .2s;
        display: flex; align-items: center; gap: .5rem;
    }
    .btn-action:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
        border-color: #fff;
    }
    .btn-primary-action {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
    .btn-primary-action:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
        color: #fff;
    }

    /* ====== 聯絡資訊區 ====== */
    .contact-info {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-left: 3px solid var(--primary);
        border-radius: 4px;
        padding: 1.75rem;
        margin: 1.5rem 0;
    }
    .contact-title {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
        display: flex; align-items: center;
    }
    .contact-title i { color: var(--accent); margin-right: .35rem; }
    .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
    }
    .contact-item h6 {
        font-family: var(--font-serif);
        color: var(--primary);
        font-weight: 600;
        margin-bottom: .35rem;
        letter-spacing: .5px;
    }
    .contact-item p {
        margin: 0;
        line-height: 1.7;
        font-size: .92rem;
        color: var(--text);
    }

    @media (max-width: 768px) {
        .event-title { font-size: 1.5rem; }
        .event-period { font-size: 1rem; }
        .content-section { padding: 1.75rem 1.25rem; }
        .action-section { padding: 2rem 1.25rem; }
        .action-title { font-size: 1.3rem; }
        .action-buttons { flex-direction: column; align-items: stretch; }
        .btn-action { justify-content: center; }
        .timeline-item { padding-left: 50px; }
    }