/**
 * Zamseed Partners Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-partners {
    position: relative;
    width: 100%;
    background-color: var(--zs-warm, #fdfcf9);
    padding: var(--zs-section-padding, 92px) 20px;
}

/*
 * Shared width/centering boundary for both the header and the grid, so
 * they always align to the exact same edges regardless of how wide the
 * surrounding Elementor section/column is — matches the theme's
 * .container rule (--zs-container-max / margin-inline: auto) without
 * depending on that literal class being present in the markup, since
 * this widget (like every other Zamseed widget) must stay self-
 * contained and stylable inside any Elementor structure.
 */
.zs-partners__inner {
    max-width: var(--zs-container-max, 1200px);
    margin-inline: auto;
}

.zs-partners__header {
    width: 100%;
    margin: 0 auto 40px;
    text-align: center;
}

.zs-partners__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* --zs-accent (#c48c33) is the brand gold. This rule used to declare
       --zs-accent-text (#9a6c1f) while the eyebrow_color control default
       forced #c48c33 on top of it, so the stylesheet never described what
       actually rendered. The control default is now blank and this is the
       single source of truth, matching csr / process-steps /
       journey-timeline, which already use --zs-accent. */
    color: var(--zs-accent, #c48c33);
}

.zs-partners__heading {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--zs-primary, #2d5a27);
}

.zs-partners__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--zs-muted, #555555);
}

.zs-partners__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 40px;
    column-gap: 40px;
    align-items: stretch;
    width: 100%;
}

/*
 * The card shell. Grid's default justify-items/align-items behaviour is
 * "stretch", so every card — a direct grid child — fills its column's
 * full width and the row's full height automatically; combined with
 * min-height below, this is what guarantees every card (regardless of
 * how its own logo's source canvas is shaped) ends up the same size.
 */
.zs-partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 140px;
    padding: 24px;
    background-color: #fff;
    text-decoration: none;
    border-radius: 0;
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

a.zs-partners__logo:hover,
a.zs-partners__logo:focus-visible {
    transform: translateY(-2px);
}

a.zs-partners__logo:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 4px;
}

/*
 * Dedicated centering frame between the card and the image. With a
 * single image child this duplicates the card's own centering, but it
 * gives per-item logo-size overrides (--partner-logo-max-width/height)
 * a stable, card-padding-independent box to size against.
 */
.zs-partners__logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.zs-partners__logo-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--partner-logo-max-width, 100%);
    max-height: var(--partner-logo-max-height, 90px);
    object-fit: contain;
    object-position: center;
}

/* Logo Fit Mode control: cover crops to fill instead of containing. */
.zs-partners__grid--fit-cover .zs-partners__logo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grayscale + hover treatment */
.zs-partners__grid--grayscale .zs-partners__logo-frame img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.zs-partners__grid--hover-restore-color a.zs-partners__logo:hover .zs-partners__logo-frame img,
.zs-partners__grid--hover-restore-color a.zs-partners__logo:focus-visible .zs-partners__logo-frame img {
    filter: grayscale(0%);
    opacity: 1;
}

.zs-partners__grid--hover-fade a.zs-partners__logo:hover .zs-partners__logo-frame img,
.zs-partners__grid--hover-fade a.zs-partners__logo:focus-visible .zs-partners__logo-frame img {
    opacity: 1;
}

/* Publishable, not just an editor notice. This box used to be reachable only in
   the editor, so a 2px dashed border was harmless; an Empty State Message now
   puts it on the page, where a dashed placeholder frame would read as a broken
   section. Solid hairline, matching the Team widget's published empty state. */
.zs-partners__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--zs-warm, #fdfcf9);
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
}

.zs-partners__empty p {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

.zs-partners__empty p.zs-partners__empty-message {
    font-size: 1.0625rem;
    color: var(--zs-text, #1c1c1c);
}

/* Editor-only diagnostic. Element-qualified so it beats the `margin: 0` above. */
.zs-partners__empty p.zs-partners__empty-hint {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--zs-accent, #c48c33);
    font-size: 0.8125rem;
    color: var(--zs-accent-text, #9a6c1f);
}

/* The empty variant keeps the section's own vertical rhythm, so a page does not
   jump when logos are added. */
.zs-partners--empty .zs-partners__header {
    margin-bottom: 32px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Aligned to Elementor's own default tablet/mobile breakpoints
   (1024px / 767px) so the hand-written grid-column rules below never
   disagree with the responsive "Columns" control's own generated CSS. */
@media (max-width: 1024px) {
    .zs-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; column-gap: 32px; }
}

@media (max-width: 767px) {
    .zs-partners__header { margin-bottom: 28px; }
    .zs-partners__heading { font-size: clamp(1.75rem, 6vw, 2rem); }
    .zs-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; column-gap: 24px; }
    /* Card min-height, padding and logo max-height at this breakpoint
       are owned by their own Elementor responsive controls'
       mobile_default (see register_style_card_controls() /
       register_style_logo_controls()), not hardcoded here — a plain
       CSS override at the same breakpoint would compete with those
       controls' generated CSS in an ordering-dependent way. */
}

/* Very narrow phones: the Elementor "Columns" control only exposes
   desktop/tablet/mobile tiers, so this last collapse to one column is
   deliberately plain CSS. The doubled class selector matches (rather
   than exceeds) the specificity of Elementor's own wrapper-scoped
   per-widget CSS, so this still wins at this narrower, nested
   breakpoint regardless of what column count an editor has configured
   for the wider "mobile" tier above. */
@media (max-width: 480px) {
    .zs-partners__grid.zs-partners__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-partners__logo,
    .zs-partners__logo-frame img {
        transition: none;
    }
    a.zs-partners__logo:hover,
    a.zs-partners__logo:focus-visible {
        transform: none;
    }
}