/*
 * Services for Schools (/services-for-schools/) - page layer.
 *
 * Moved out of the Gutenberg inline block 15.08.2026 onto the shared B2B
 * layer. This page was already aligned to the July 2026 refresh; changes in
 * the move: semantic tokens instead of local ones, eyebrow removed (retired
 * v4.2), checkbox-hack FAQ replaced by the canonical <details> component,
 * read-more JS replaced by <details class="ffb-more">.
 */

/* ---------- Hero ---------- */

#ff-b2b.ff-b2b--schools .ffb-hero {
    padding: 2rem 0;
}

#ff-b2b.ff-b2b--schools .ffb-hero-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
}

/* Rounded parallelogram clip - this page's one geometric flourish. */
#ff-b2b.ff-b2b--schools .ffb-hero-image {
    border: none;
    border-radius: 0;
    clip-path: url(#ff-schools-hero-clip);
}

/* ---------- Service pillars ---------- */

#ff-b2b .ffb-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

#ff-b2b .ffb-pillar-card {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#ff-b2b .ffb-pillar-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1.75rem 0 1.75rem;
}

#ff-b2b .ffb-pillar-icon {
    width: 52px;
    height: 52px;
    background: var(--tint-teal);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--action);
}

#ff-b2b .ffb-pillar-icon svg {
    width: 26px;
    height: 26px;
}

#ff-b2b .ffb-pillar-title {
    margin-bottom: 0;
    font-size: 1.25rem;
}

/* Colour-coding: accent lives on the icon + hover border, flat and AA. */
#ff-b2b .ffb-pillar-card:nth-child(2) .ffb-pillar-icon {
    background: var(--tint-amber);
    color: var(--accent-warm-text);
}
#ff-b2b .ffb-pillar-card:nth-child(2):hover {
    border-color: #cc9900;
}
#ff-b2b .ffb-pillar-card:nth-child(3) .ffb-pillar-icon {
    background: var(--tint-deep);
    color: var(--action-hover);
}
#ff-b2b .ffb-pillar-card:nth-child(3):hover {
    border-color: var(--action-hover);
}

#ff-b2b .ffb-pillar-content {
    padding: 1.5rem 1.75rem 1.75rem 1.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#ff-b2b .ffb-pillar-text {
    margin-bottom: 1.25rem;
    flex-grow: 1;
    font-size: 1rem;
}

/* ---------- Detailed services ---------- */

#ff-b2b.ff-b2b--schools .ffb-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    counter-reset: service-counter;
}

#ff-b2b.ff-b2b--schools .ffb-service-card {
    counter-increment: service-counter;
}

#ff-b2b.ff-b2b--schools .ffb-service-card::before {
    content: "0" counter(service-counter);
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--content-secondary);
}

#ff-b2b .ffb-service-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-right: 2.5rem; /* clear the corner number */
}

/* No background tile - icon sits directly next to the title. */
#ff-b2b.ff-b2b--schools .ffb-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--action);
    flex-shrink: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    margin-bottom: 0;
}

#ff-b2b.ff-b2b--schools .ffb-service-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

#ff-b2b.ff-b2b--schools .ffb-service-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

#ff-b2b .ffb-service-text {
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

/* ---------- Approach ---------- */

#ff-b2b .ffb-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

#ff-b2b .ffb-approach-card {
    padding: 2.25rem;
}

#ff-b2b .ffb-approach-icon {
    width: 56px;
    height: 56px;
    background: var(--tint-teal);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--action);
    margin-bottom: 1.5rem;
}

#ff-b2b .ffb-approach-icon svg {
    width: 28px;
    height: 28px;
}

#ff-b2b .ffb-approach-title {
    margin-bottom: 1rem;
}

#ff-b2b .ffb-approach-text {
    margin-bottom: 0;
    font-size: 1rem;
}

/* ---------- Contact ---------- */

#ff-b2b.ff-b2b--schools .ffb-contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
    #ff-b2b .ffb-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    #ff-b2b.ff-b2b--schools .ffb-services-grid,
    #ff-b2b .ffb-approach-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    #ff-b2b.ff-b2b--schools .ffb-hero-image {
        clip-path: none;
        border-radius: var(--radius, 12px);
        border: 1px solid var(--border-subtle);
    }
}

@media (max-width: 768px) {
    #ff-b2b .ffb-pillars-grid {
        grid-template-columns: 1fr;
    }
}