/*
 * 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;
    /* Hard guard: the Owl stage (a single transformed strip several screens wide)
       must never inflate the document's scrollable width and make the page
       horizontally pannable on mobile. Clipping here contains it for good. */
    max-width:   100%;
    overflow:    hidden;
}
.wbp-wrapper *,
.wbp-wrapper *::before,
.wbp-wrapper *::after {
    box-sizing: inherit;
}

/* Bootstrap .container wrapping the carousels' main parent. Width-constrained
   (max-width: 100%) so the grouped carousels stay inside their column. */
.wbp-wrapper > .wbp-container {
    max-width:   100%;
    padding:     0;
}
/* Homepage renders the shortcode inside .container-fluid on purpose (full-bleed
   carousel) — keep that behaviour, don't let the nested container constrain it. */
.container-fluid .wbp-wrapper > .wbp-container {
    max-width: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   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: hidden;
    max-width: 100%;
}
.wbp-carousel .owl-stage-outer {
    padding: 14px 0 !important;  /* vertical room for hover shadow */
    overflow: hidden !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;
    }
}