/**
 * Section: resource-download-section
 *
 * Extracted from template-parts/resource_download_section.php.
 * Loaded via trunorth_enqueue_section('resource-download-section').
 */

.rds-component {
        font-family: "Open Sans", sans-serif;

        /* ── Nav ── */
        .rds-nav {
            padding: calc(var(--vw) * 1) calc(var(--vw) * 10) calc(var(--vw) * 1) calc(var(--vw) * 10);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--vw) * 4);
        }

        /* Featured button — full width black bar */
        .rds-nav-btn-featured {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            background: #1a1a1a;
            color: #fff;
            text-decoration: none;
            padding: calc(var(--vw) * 2) calc(var(--vw) * 4);
            font-family: "Montserrat", sans-serif;
            font-size: clamp(1rem, calc(var(--vw) * 1.5), calc(var(--vw) * 1.5));
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            width: fit-content;
            transition: background 0.2s;
            border-radius: calc(var(--vw) * 0.5);

            &:hover {
                background: #333;
            }
        }

        .rds-nav-featured-icon {
            font-size: 1.1em;
            color: #f5c518;
        }

        /* Regular grid buttons */
        .rds-nav-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--vw) * 2.5) calc(var(--vw) * 4);
            width: 100%;
        }

        .rds-nav-btn {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: calc(var(--vw) * 2);
            text-decoration: none;
            color: #1a1a1a;
            transition: color 0.2s;

            &:hover {
                color: #c22127;
            }

            .rds-nav-icon {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }

        .rds-nav-icon-placeholder {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid #c22127;
            background: transparent;
            display: block;
        }

        .rds-nav-label {
            font-size: var(--font-medium);
            font-weight: 600;
            text-transform: uppercase;
            font-family: "Montserrat", sans-serif;
        }

        /* Disclaimer — white text on brand-red pill so it reads as a
           real warning banner, not just bold body copy. */
        .rds-nav-disclaimer {
            font-size: var(--font-medium);
            font-weight: 600;
            text-align: center;
            color: #ffffff;
            background: #C22127;
            font-family: "Montserrat", sans-serif;
            line-height: 1.4;
            padding: 0.75rem 1.25rem;
            border-radius: 6px;
            margin: 1rem auto 0;
            max-width: fit-content;
        }

        /* ── Sections ── */
        .rds-sections {
            display: flex;
            flex-direction: column;
        }

        .rds-section {
            background: #fff;
            padding: calc(var(--vw) * 4) calc(var(--vw) * 8);

            &:nth-child(even) {
                background: #E3E3E3;
            }

            &.rds-section--featured .rds-section-heading {
                color: #c22127;
                font-weight: 700;
            }
        }

        .rds-section-heading {
            font-family: "Montserrat", sans-serif;
            font-size: clamp(1rem, calc(var(--vw) * 2), calc(var(--vw) * 2));
            font-weight: 600;
            text-transform: uppercase;
            color: #1a1a1a;
            margin-bottom: calc(var(--vw) * 1.5);
            line-height: 1.2;
        }

        .rds-section-description {
            font-size: var(--font-medium);
            line-height: 1.2;
            color: #333;
            margin-bottom: calc(var(--vw) * 2);
        }

        /* ── Mobile ── */
        @media (max-width: 768px) {
            .rds-nav {
                padding: calc(var(--vw) * 4) calc(var(--vw) * 5);
                gap: calc(var(--vw) * 5);
            }

            .rds-nav-btn-featured {
                font-size: clamp(0.8rem, calc(var(--vw) * 3.5), 1rem);
                padding: calc(var(--vw) * 3) calc(var(--vw) * 4);
                max-width: 100%;
            }

            .rds-nav-grid {
                grid-template-columns: 1fr;
                gap: calc(var(--vw) * 4);
            }

            .rds-nav-label {
                font-size: clamp(0.75rem, calc(var(--vw) * 3.5), 1rem);
            }

            .rds-section {
                padding: calc(var(--vw) * 4) calc(var(--vw) * 5);
            }

            .rds-section-heading {
                font-size: clamp(1rem, calc(var(--vw) * 5), 1.5rem);
                margin-bottom: calc(var(--vw) * 3);
            }

            .rds-section-description {
                font-size: clamp(0.8rem, calc(var(--vw) * 3.5), 1rem);
                max-width: 100%;
                margin-bottom: calc(var(--vw) * 5);
            }
        }
    }