/**
 * Pen Logos Section Block Styles
 *
 * @package ACF Child Theme
 */

:root {
    --color-yellow: #e3cd51;
    --color-light: #e7e9ed;
    --color-text: #595959;
    --color-teal: #2d5765;
    --color-white: #ffffff;
    --color-apigpen: #af623d;
    --color-avaxzipen: #54b141;
    --color-amedipen: #4c93b5;
    --color-asolopen: #5b5b5b;
    --font-primary: 'Aptos', sans-serif;
}

/* ── Section Wrapper — full-width white background ──────────────────────── */
.pen-logos-section {
    background-color: var(--color-white, #ffffff);
    width: 100%;
    padding: 70px 0;
    margin-bottom: 0 !important;
}

/* ── Content Container — WordPress layout width ─────────────────────────── */
.pen-logos-section__container {
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Logos Row — four equal columns ─────────────────────────────────────── */
.pen-logos-section__logos-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 50px;
}

/* ── Single Logo Column ─────────────────────────────────────────────────── */
.pen-logos-section__logo-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    border-right: 3px solid #dadddf;
}

.pen-logos-section__logo-col--last {
    border-right: none;
}

/* ── Linked logo wrap — anchor element ──────────────────────────────────── */
.pen-logos-section__logo-wrap--linked {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
}

.pen-logos-section__logo-wrap--linked:hover {
    opacity: 0.75;
}

/* ── Logo Image ─────────────────────────────────────────────────────────── */
.pen-logos-section__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pen-logos-section__logo {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: 80px;
    display: block;
    object-fit: contain;
}

/* ── Text Area — description + small title ──────────────────────────────── */
.pen-logos-section__text-area {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* ── Description ────────────────────────────────────────────────────────── */
.pen-logos-section__description {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text, #595959);
    line-height: 1.65;
    margin: 0 0 18px 0;
}

/* ── Small Title ────────────────────────────────────────────────────────── */
.pen-logos-section__small-title {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-teal, #2d5765);
    line-height: 1.4;
    margin: 0;
}

/* ── Tablet — 2 columns, 2 rows ─────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {
    .pen-logos-section {
        padding: 55px 0;
    }

    .pen-logos-section__logos-row {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
    }

    /* Reset desktop right-border, rebuild for 2-column grid */
    .pen-logos-section__logo-col {
        border-right: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        padding: 24px 20px;
    }

    /* Remove right border from every second column */
    .pen-logos-section__logo-col:nth-child(2n) {
        border-right: none;
    }

    /* Remove bottom border from the last two items */
    .pen-logos-section__logo-col:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .pen-logos-section__logo-col--last {
        border-right: none;
    }

    .pen-logos-section__logo {
        max-height: 52px;
    }

    .pen-logos-section__description {
        font-size: 0.9375rem;
    }
}

/* ── Mobile — 1 column ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pen-logos-section {
        padding: 45px 0;
    }

    /* ── Content Container — WordPress layout width ─────────────────────────── */
    .pen-logos-section__container {
        max-width: var(--theme-normal-container-max-width, 1290px);
        width: var(--theme-container-width, 100%);
    }

    .pen-logos-section__logos-row {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 35px;
    }

    .pen-logos-section__logo-col {
        border-right: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        padding: 20px 16px;
    }

    /* Remove right border from every second column */
    .pen-logos-section__logo-col:nth-child(2n) {
        border-right: none;
    }

    /* Remove bottom border from the last two items */
    .pen-logos-section__logo-col:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .pen-logos-section__logo-col--last {
        border-right: none;
    }

    .pen-logos-section__logo {
        max-height: 44px;
    }

    .pen-logos-section__text-area {
        max-width: 100%;
        padding: 0 10px;
    }

    .pen-logos-section__description {
        font-size: 0.9rem;
    }

    .pen-logos-section__small-title {
        font-size: 0.9rem;
    }
}