/*
 * Webber Portfolio — Frontend Styles
 * ──────────────────────────────────────────────────────────────────────────────
 * CSS custom properties (overridable via PHP Settings or per shortcode):
 *
 *  --wbp-primary        Main accent colour   (default: #C8102E — theme red)
 *  --wbp-item-height    Logo image height    (default: 80px)
 *  --wbp-hover-shadow   Item hover shadow
 *  --wbp-hover-radius   Item hover border-radius
 */

/* ════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --wbp-primary:         #C8102E;
    --wbp-primary-hover:   color-mix(in srgb, var(--wbp-primary) 82%, #000);
    --wbp-primary-light:   color-mix(in srgb, var(--wbp-primary) 10%, #fff);

    /* Neutrals */
    --wbp-text:            #1a1a1a;
    --wbp-text-muted:      #666666;
    --wbp-bg:              #ffffff;
    --wbp-bg-alt:          #F5F5F5;
    --wbp-border:          #DADADA;

    /* Component tokens */
    --wbp-radius:          12px;
    --wbp-transition:      all 0.25s ease;
    --wbp-gap:             16px;
    --wbp-font:            inherit;

    /* Logo item */
    --wbp-item-height:        80px;    /* overridden by inline style from PHP */
    --wbp-item-padding:       16px 12px;

    /* Category heading */
    --wbp-heading-font-size:  1.05rem; /* overridden by inline style from PHP */

    /* Carousel-grouped spacing */
    --wbp-category-spacing:   48px;    /* overridden by inline style from PHP */

    /* Hover effect — matches the design brief */
    --wbp-hover-bg:        #FFFFFF;
    --wbp-hover-shadow:    0px 0px 6.9px 2px rgba(0, 0, 0, 0.27);
    --wbp-hover-radius:    12px;

    /* Carousel */
    --wbp-nav-size:        38px;
}

/* ════════════════════════════════════════════════════════════════════════════
   WRAPPER
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-wrapper {
    font-family: var(--wbp-font);
    color:       var(--wbp-text);
    box-sizing:  border-box;
}
.wbp-wrapper *,
.wbp-wrapper *::before,
.wbp-wrapper *::after {
    box-sizing: inherit;
}

/* ════════════════════════════════════════════════════════════════════════════
   FILTER TABS
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-filter-tabs {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    margin-bottom:  32px;
}

.wbp-tab {
    background:     transparent;
    border:         2px solid var(--wbp-border);
    border-radius:  100px;
    padding:        7px 20px;
    font-size:      0.875rem;
    font-weight:    600;
    color:          var(--wbp-text-muted);
    cursor:         pointer;
    transition:     var(--wbp-transition);
    outline:        none;
    white-space:    nowrap;
    line-height:    1.4;
    font-family:    var(--wbp-font);
}
.wbp-tab:hover {
    border-color: var(--wbp-primary);
    color:        var(--wbp-primary);
}
.wbp-tab--active {
    background:   var(--wbp-primary);
    border-color: var(--wbp-primary);
    color:        #ffffff;
}
.wbp-tab--active:hover {
    background:   var(--wbp-primary-hover);
    border-color: var(--wbp-primary-hover);
    color:        #ffffff;
}

/* ── Filter tabs — alignment modifier ────────────────────────────────────── */
.wbp-filter-tabs--center {
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY SECTION  (carousel-grouped layout)
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-category-section {
    margin-bottom: var(--wbp-category-spacing);
}
.wbp-category-section:last-child {
    margin-bottom: 0;
}

/* Hidden when filter tab is active */
.wbp-category-section.wbp-hidden,
.wbp-category-section[hidden] {
    display: none !important;
}

/* ── Category heading ────────────────────────────────────────────────────── */
.wbp-category-heading {
    font-size:      var(--wbp-heading-font-size);
    font-weight:    700;
    color:          var(--wbp-text);
    margin:         0 0 18px;
    padding-bottom: 10px;
    border-bottom:  3px solid var(--wbp-primary);
    letter-spacing: -0.2px;
}

/* Alignment modifier */
.wbp-category-heading--center {
    text-align: center;
}

/* No-border modifier */
.wbp-category-heading--no-border {
    border-bottom:  none;
    padding-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDE  — groups N logos per carousel column
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-slide {
    display:        flex;
    flex-direction: column;
    gap:            var(--wbp-gap);
    height:         100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   ITEM  — the individual logo tile
   Default state: transparent / no border / no shadow
   Hover state:   white background + soft shadow + rounded corners
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-item {
    background:      transparent;
    border-radius:   var(--wbp-hover-radius);
    padding:         var(--wbp-item-padding);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             8px;
    transition:      background 0.25s ease, box-shadow 0.25s ease;
    position:        relative;
    cursor:          default;
    /* No box-shadow, no border by default */
}

.wbp-item:hover {
    background:    var(--wbp-hover-bg);
    box-shadow:    var(--wbp-hover-shadow);
    border-radius: var(--wbp-hover-radius);
}

/* When the item has a link, show pointer */
.wbp-item:has(.wbp-item-link) {
    cursor: pointer;
}

/* ── Logo image ───────────────────────────────────────────────────────────── */
.wbp-logo-img {
    width:       100%;
    max-width:   100%;
    height:      var(--wbp-item-height);
    object-fit:  contain;
    display:     block;
    /* Ensure logos don't overflow */
    max-height:  var(--wbp-item-height);
}

/* ── Link wrapper ────────────────────────────────────────────────────────── */
.wbp-item-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             8px;
    text-decoration: none;
    width:           100%;
    color:           inherit;
}

/* ── Placeholder (no featured image set) ──────────────────────────────────── */
.wbp-logo-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          var(--wbp-item-height);
    width:           100%;
    background:      var(--wbp-bg-alt);
    border-radius:   6px;
    font-size:       0.75rem;
    color:           var(--wbp-text-muted);
    text-align:      center;
    padding:         8px;
    line-height:     1.3;
}

/* ── List-mode info (name + subtitle below image) ─────────────────────────── */
.wbp-item-info {
    text-align:  center;
    margin-top:  4px;
}
.wbp-item-name {
    display:     block;
    font-weight: 700;
    font-size:   0.82rem;
    color:       var(--wbp-text);
    line-height: 1.3;
}
.wbp-item-subtitle {
    display:    block;
    font-size:  0.74rem;
    color:      var(--wbp-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════════════
   NO RESULTS
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-no-results {
    color:         var(--wbp-text-muted);
    text-align:    center;
    padding:       40px 20px;
    background:    var(--wbp-bg-alt);
    border-radius: var(--wbp-radius);
    font-size:     0.9rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-grid {
    display: grid;
    gap:     var(--wbp-gap);
}
.wbp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wbp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wbp-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.wbp-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.wbp-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 991px) {
    .wbp-grid--cols-5,
    .wbp-grid--cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .wbp-grid--cols-4,
    .wbp-grid--cols-5,
    .wbp-grid--cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    .wbp-grid--cols-3,
    .wbp-grid--cols-4,
    .wbp-grid--cols-5,
    .wbp-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
    .wbp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIST LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.wbp-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--wbp-gap);
}
.wbp-list .wbp-item {
    flex-direction:  row;
    justify-content: flex-start;
    align-items:     center;
    gap:             20px;
}
.wbp-list .wbp-item-link {
    flex-direction: row;
    align-items:    center;
    gap:            20px;
}
.wbp-list .wbp-item-info {
    text-align:  left;
    margin-top:  0;
}
.wbp-list .wbp-logo-img {
    width:     auto;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   CAROUSEL — Owl Carousel overrides
   ════════════════════════════════════════════════════════════════════════════ */

/* Allow peek / shadows to bleed outside the track */
.wbp-carousel.owl-carousel {
    overflow: visible;
}
.wbp-carousel .owl-stage-outer {
    padding: 14px 0 !important;  /* vertical room for hover shadow */
    overflow: visible !important;
}
.wbp-carousel .owl-item {
    padding: 4px 6px;
}

/* Equal-height slides */
.wbp-carousel .owl-item .wbp-slide {
    height: 100%;
}

/* ── Navigation arrows ────────────────────────────────────────────────────── */
.wbp-carousel .owl-nav {
    margin-top:  12px;
    text-align:  center;
    user-select: none;
}

.wbp-carousel .owl-nav button.owl-prev,
.wbp-carousel .owl-nav button.owl-next {
    background:      var(--wbp-bg)      !important;
    width:           var(--wbp-nav-size);
    height:          var(--wbp-nav-size);
    margin:          0 4px;
    border-radius:   50% !important;
    color:           var(--wbp-primary) !important;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--wbp-transition);
    outline:         none;
    padding:         0;
    line-height:     1;
    box-shadow:      0 1px 4px rgba(0,0,0,.12);
}
.wbp-carousel .owl-nav button.owl-prev:hover,
.wbp-carousel .owl-nav button.owl-next:hover {
    background:  var(--wbp-primary) !important;
    color:       #ffffff             !important;
    box-shadow:  0 2px 8px rgba(0,0,0,.18);
}
.wbp-carousel .owl-nav .disabled {
    opacity:        0.3;
    pointer-events: none;
}

/* ── Nav visibility — controlled by data-nav attribute ───────────────────── */
.wbp-carousel.owl-carousel[data-nav="1"] .owl-nav,
.wbp-wrapper .wbp-carousel[data-nav="1"] .owl-nav {
    display:    block   !important;
    visibility: visible !important;
}
.wbp-carousel.owl-carousel[data-nav="0"] .owl-nav,
.wbp-wrapper .wbp-carousel[data-nav="0"] .owl-nav {
    display: none !important;
}

/* ── Dots visibility — controlled by data-dots attribute ─────────────────── */
.wbp-carousel.owl-carousel[data-dots="1"] .owl-dots,
.wbp-wrapper .wbp-carousel[data-dots="1"] .owl-dots {
    display:    flex    !important;
    visibility: visible !important;
}
.wbp-carousel.owl-carousel[data-dots="0"] .owl-dots,
.wbp-wrapper .wbp-carousel[data-dots="0"] .owl-dots {
    display: none !important;
}

/* ── Dots layout ─────────────────────────────────────────────────────────── */
.wbp-carousel.owl-carousel .owl-dots,
.wbp-wrapper .wbp-carousel .owl-dots {
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             6px;
    margin-top:      14px;
    padding:         6px 0 2px;
    width:           100%;
    text-align:      center;
}

.wbp-carousel.owl-carousel .owl-dots .owl-dot,
.wbp-wrapper .wbp-carousel .owl-dots .owl-dot {
    display:            inline-flex !important;
    align-items:        center;
    justify-content:    center;
    background:         transparent !important;
    border:             none !important;
    outline:            none;
    padding:            5px;
    margin:             0;
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
    flex-shrink:        0;
}

.wbp-carousel.owl-carousel .owl-dots .owl-dot span,
.wbp-wrapper .wbp-carousel .owl-dots .owl-dot span {
    display:       block !important;
    width:         8px  !important;
    height:        8px  !important;
    border-radius: 50%  !important;
    background:    var(--wbp-border, #DADADA) !important;
    transition:    background 0.25s ease, transform 0.25s ease;
    margin:        0 !important;
    flex-shrink:   0;
}

.wbp-carousel.owl-carousel .owl-dots .owl-dot.active span,
.wbp-wrapper .wbp-carousel .owl-dots .owl-dot.active span,
.wbp-carousel.owl-carousel .owl-dots .owl-dot:hover span,
.wbp-wrapper .wbp-carousel .owl-dots .owl-dot:hover span {
    background: var(--wbp-primary, #C8102E) !important;
    transform:  scale(1.35);
}

/* ════════════════════════════════════════════════════════════════════════════
   REDUCED-MOTION
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wbp-item,
    .wbp-tab,
    .wbp-carousel .owl-nav button,
    .wbp-carousel .owl-dots .owl-dot span {
        transition: none !important;
        animation:  none !important;
    }
}