/**
 * Front Page Sections — assets/css/front-page.css
 * Spacing, typography, and layout for homepage sections
 * aligned with Figma design.
 *
 * @package  DEI4SME
 * @used-in  front-page.php
 *
 * SELECTORS:
 *   .for-whom          — Target audience section (two-column: text + image)
 *   .why-matters        — Value proposition section (two-column: image + text + pills)
 *   .tools-section      — Tool card grid wrapper
 *   .cta-intent         — Combined CTA + intent navigation (overlap card)
 *   .dei4sme-resources  — Resources section (shared with tool pages)
 */

/* === Shared section padding === */
.for-whom,
.why-matters,
.tools-section {
    padding: var(--spacing-xl) 0;
}

/* === Section Label (shared pattern) === */
.for-whom__label,
.why-matters__label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.for-whom__label::before,
.why-matters__label::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 3px;
    border-radius: 2px;
}

.for-whom__label {
    color: var(--color-orange);
}

.for-whom__label::before {
    background: var(--color-orange);
}

.why-matters__label {
    color: var(--color-green);
}

.why-matters__label::before {
    background: var(--color-green);
}

/* ============================================================
   Section 2: For Whom Is This Tool?
   ============================================================ */
.for-whom {
    background: var(--color-bg);
}

.for-whom__grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--spacing-lg);
    align-items: center;
}

.for-whom__content h2 {
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    color: var(--color-text-heading);
}

.for-whom__content p {
    max-width: 72ch;
    line-height: 1.6;
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-heading);
}

.for-whom__list li {
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-heading);
}

.for-whom__list {
    list-style: none;
    padding-left: 0;
    margin: var(--spacing-sm) 0 0 0;
}

.for-whom__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.for-whom__bullet-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 7.33px;
    background: rgba(239, 182, 122, 0.15);
    border-radius: 50%;
    margin-top: 0.1em;
}

.for-whom__list a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.for-whom__media {
    position: relative;
}

.for-whom__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Decorative circles on the image */
.for-whom__media::before,
.for-whom__media::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

/* Orange circle — top right */
.for-whom__media::before {
    width: 180px;
    height: 180px;
    background: rgba(239, 182, 122, 0.25);
    top: -40px;
    right: -40px;
}

/* Blue circle — bottom left */
.for-whom__media::after {
    width: 160px;
    height: 160px;
    background: rgba(141, 181, 226, 0.3);
    bottom: -30px;
    left: -30px;
}

/* ============================================================
   Section 3: Why Social Sustainability Matters
   ============================================================ */
.why-matters {
    background: var(--color-bg-surface);
}

.why-matters__grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: var(--spacing-lg);
    align-items: center;
}

.why-matters__media {
    position: relative;
}

.why-matters__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Decorative circles on the image */
.why-matters__media::before,
.why-matters__media::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

/* Red/pink circle — top left */
.why-matters__media::before {
    width: 160px;
    height: 160px;
    background: #F07F7E33;
    top: -30px;
    left: -30px;
}

/* Green circle — bottom right */
.why-matters__media::after {
    width: 180px;
    height: 180px;
    background: #AAD3C94D;
    bottom: -40px;
    right: -40px;
}

.why-matters__content h2 {
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    color: var(--color-text-heading);
}

.why-matters__content p {
    max-width: 72ch;
    line-height: 1.6;
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-heading);
}

.why-matters__content .why-matters__highlight {
    font-weight: 600;
    letter-spacing: -1px;
}

/* Pill tags (2x2 grid) */
.why-matters__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.why-matters__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 16px var(--spacing-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-heading);
}

.why-matters__pill-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* ============================================================
   Section 4: Tool Cards (grid wrapper)
   ============================================================ */
.tools-section {
    background: var(--color-bg);
}

.tools-section h2 {
    margin-bottom: var(--spacing-md);
    text-align: center;
    color: var(--color-blue-accent);
    font-weight: 700;
}

/* ============================================================
   Section 5+6: CTA + Intent Navigation (combined)
   ============================================================ */
.cta-intent {
    background: var(--gradient-primary);
    padding-bottom: var(--spacing-xl);
}

.cta-intent__hero {
    color: #fff;
    text-align: center;
    padding: var(--spacing-xl) 0 calc(var(--spacing-xl) + var(--spacing-xl));
}

.cta-intent__hero h2 {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 8px;
}

.cta-intent__hero p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.6;
}

.cta-intent__card {
    background: var(--color-bg);
    border-radius: calc(var(--radius) * 2);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    margin-top: calc(-1 * var(--spacing-xl));
    position: relative;
    z-index: 1;
}

.cta-intent__card h3 {
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-text-heading);
}

.cta-intent__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cta-intent__item {
    border: 2px solid var(--color-blue-accent);
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}

.cta-intent__item:hover {
    box-shadow: var(--shadow);
}

.cta-intent__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 24px;
    text-decoration: none;
    color: var(--color-text);
    min-height: 44px;
}

.cta-intent__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: var(--radius);
}

.cta-intent__link-icon-left {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    border-radius: 50%;
}

.cta-intent__link-icon-left img {
    width: 20px;
    height: 20px;
}

.cta-intent__link-text {
    flex: 1;
    font-weight: 600;
    font-size: 20px;
    color: var(--color-text-heading);
}

.cta-intent__link-text::first-letter {
    text-transform: capitalize;
}

.cta-intent__link-icon-right {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    transition: background var(--transition);
    box-shadow: 0px 1.67px 3.33px -1.67px #0000001A, 0px 3.33px 5px -0.83px #0000001A;
}

.cta-intent__item:hover .cta-intent__link-icon-right {
    background: var(--color-primary-light);
}

.cta-intent__link-icon-right img {
    width: 18px;
    height: 18px;
}

/* ============================================================
   Resources Section (shared with tool pages)
   ============================================================ */
.dei4sme-resources {
    padding: 40px 0;
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.dei4sme-resources__title {
    margin-bottom: var(--spacing-sm);
}

.dei4sme-resources__list {
    margin: 0;
    padding: 0;
    list-style: disc;
    padding-left: 1.5em;
}

.dei4sme-resources__item {
    margin-bottom: 0.5em;
}

.dei4sme-resources__link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   Responsive — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .for-whom__grid,
    .why-matters__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .dei4sme-resources {
        max-width: 100%;
        padding: 40px 24px;
    }
}

/* ============================================================
   Responsive — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .for-whom,
    .why-matters,
    .tools-section {
        padding: var(--spacing-lg) 0;
    }

    .cta-intent__hero {
        padding-bottom: calc(var(--spacing-xl) + var(--spacing-lg));
    }

    .cta-intent__card {
        margin-top: calc(-1 * var(--spacing-lg));
        padding: var(--spacing-md);
    }

    .cta-intent {
        padding-bottom: var(--spacing-lg);
    }

    .dei4sme-resources {
        padding: 32px 16px;
        max-width: 100%;
    }
}

/* ============================================================
   Responsive — Small Mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .why-matters__pills {
        grid-template-columns: 1fr;
    }

    .cta-intent__card {
        padding: var(--spacing-sm);
    }

    .cta-intent__link-text {
        font-size: 0.9rem;
    }
}