/* ==========================================================================
   USP module — Unique Selling Points
   Self-contained, plain CSS. No build step required.
   This file is auto-enqueued by partials/content-mb-usp.blade.php.
   Drop location:  wp-content/themes/vital/public/css/mb-usp.css
   --------------------------------------------------------------------------
   BREAKPOINT
   Desktop ↔ mobile switch sits at 1102px:
     • >= 1102px : multi-column desktop layout, hover darkens each card
     • <  1102px : stacked mobile layout, titles wrap up to 3 lines,
                   "Highlight on Mobile" items render in the darker shade

   COLOURS
   The partial computes a darkened version of the editor's chosen
   background colour and passes it in via `--usp-bg-dark`. Both the
   desktop hover and the mobile highlight read from that variable, so
   the darker shade always stays consistent with whatever the editor
   picks.
   ========================================================================== */

.mb-usp {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Vertical padding presets (top + bottom only).
   Picked in ACF via the "Vertical Padding" dropdown; the partial outputs
   one of these modifier classes on the <section>. Default is "medium",
   which matches the original look.
   -------------------------------------------------------------------------- */
.mb-usp--pad-none    { padding-top:  0;     padding-bottom: 0;    }
.mb-usp--pad-small   { padding-top: 16px;   padding-bottom: 16px; }
.mb-usp--pad-medium  { padding-top: 40px;   padding-bottom: 40px; }
.mb-usp--pad-large   { padding-top: 64px;   padding-bottom: 64px; }
.mb-usp--pad-xlarge  { padding-top: 96px;   padding-bottom: 96px; }

@media (min-width: 1102px) {
    .mb-usp--pad-none   { padding-top:   0;     padding-bottom:   0;    }
    .mb-usp--pad-small  { padding-top:  32px;   padding-bottom:  32px;  }
    .mb-usp--pad-medium { padding-top:  80px;   padding-bottom:  80px;  }
    .mb-usp--pad-large  { padding-top: 120px;   padding-bottom: 120px;  }
    .mb-usp--pad-xlarge { padding-top: 160px;   padding-bottom: 160px;  }
}

.mb-usp__container {
    max-width: 1536px;     /* matches theme's max-w-screen-2xl */
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 1102px) {
    .mb-usp__container {
        padding: 0 40px;
    }
}

/* --------------------------------------------------------------------------
   Title section
   -------------------------------------------------------------------------- */
.mb-usp__title-section {
    max-width: 768px;
    margin: 0 auto 40px;
}

@media (min-width: 1102px) {
    .mb-usp__title-section {
        margin-bottom: 64px;
    }
}

.mb-usp__title-section--left   { text-align: left;   margin-left: 0;  }
.mb-usp__title-section--center { text-align: center; margin-left: auto; margin-right: auto; }
.mb-usp__title-section--right  { text-align: right;  margin-right: 0;  margin-left: auto; }

.mb-usp__eyebrow {
    display: block;
    text-transform: uppercase;
    font-family: freight-sans-pro, sans-serif;
    font-weight: 500;
    color: #B59B58;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.mb-usp__heading {
    font-family: mrs-eaves, serif;
    color: #1D201F;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 16px;
}

@media (min-width: 1102px) {
    .mb-usp__heading {
        font-size: 44px;
    }
}

.mb-usp__intro {
    font-family: freight-sans-pro, sans-serif;
    color: #1D201F;
    font-size: 16px;
    line-height: 1.6;
}

.mb-usp__intro p             { margin: 0 0 1em; }
.mb-usp__intro p:last-child  { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   USP grid
   -------------------------------------------------------------------------- */
.mb-usp__grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1102px) {
    .mb-usp__grid {
        grid-template-columns: repeat(var(--usp-cols, 5), minmax(0, 1fr));
    }
}

.mb-usp__item {
    padding: 32px 24px;
    border-bottom: 1px solid var(--usp-divider-color, rgba(33, 75, 71, 0.12));   /* acc-p @ 12% */
    background-color: transparent;
    transition: background-color 200ms ease;
}

.mb-usp__item:last-child {
    border-bottom: 0;
}

.mb-usp__item-inner {
    display: flex;
    flex-direction: column;
}

.mb-usp__label {
    display: block;
    text-transform: uppercase;
    font-family: freight-sans-pro, sans-serif;
    font-weight: 500;
    color: #B59B58;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.mb-usp__title {
    font-family: mrs-eaves, serif;
    color: var(--usp-title-color, #1D201F);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 400;
    margin: 0;
}

.mb-usp__dash {
    display: block;
    width: 36px;
    height: 2px;
    background-color: var(--usp-dash-bg, #B59B58);
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Optional per-tile button / link
     • "text"    – plain text link (default), gold, with a trailing arrow
     • "solid"   – filled green button
     • "outline" – green outline button
   Driven entirely by this stylesheet, so no build step is required.
   -------------------------------------------------------------------------- */
.mb-usp__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 20px;
    font-family: freight-sans-pro, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.mb-usp__button--text {
    color: #B59B58;
    padding: 0;
}
.mb-usp__button--text::after {
    content: "\2192";              /* → */
    font-size: 15px;
    line-height: 1;
}
.mb-usp__button--text:hover {
    text-decoration: underline;
}

.mb-usp__button--solid {
    background-color: #214B47;
    color: #ffffff;
    padding: 12px 22px;
}
.mb-usp__button--solid:hover {
    opacity: 0.9;
}

.mb-usp__button--outline {
    border: 1px solid #214B47;
    color: #214B47;
    padding: 11px 21px;
}
.mb-usp__button--outline:hover {
    background-color: #214B47;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Desktop (>= 1102px)
     • Every card darkens to --usp-bg-dark on hover.
     • The mobile-only "highlight" tickbox is ignored at this breakpoint.
   -------------------------------------------------------------------------- */
@media (min-width: 1102px) {
    .mb-usp__item {
        /* Horizontal padding shrinks gracefully as cards get narrower.
           clamp(min, preferred, max):
             • 12px minimum so very many columns still have a bit of breathing room
             • ~2vw preferred, which scales with viewport width
             • 32px maximum so 3–5 column layouts still match the original design */
        padding: 24px clamp(12px, 2vw, 32px);
        border-bottom: 0;
        border-right: 1px solid var(--usp-divider-color, rgba(33, 75, 71, 0.12));
    }

    .mb-usp__item:last-child {
        border-right: 0;
    }

    .mb-usp__item:hover {
        background-color: var(--usp-bg-dark, #E1DDD4);
    }

    .mb-usp__title {
        font-size: 30px;
    }
}

/* --------------------------------------------------------------------------
   Mobile layout (< 1102px)
     • Titles wrap, capped at 3 lines maximum (ellipsis beyond)
     • Tighter label → title gap, tighter title → dash gap
     • Cards with "Highlight on Mobile" use the darker shade by default
   -------------------------------------------------------------------------- */
@media (max-width: 1101.98px) {
    .mb-usp__label {
        margin-bottom: 8px;
    }

    .mb-usp__title {
        font-size: 22px;
        line-height: 1.25;

        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

        max-height: 3.75em;
    }

    .mb-usp__dash {
        margin-top: 10px;
    }

    /* The mobile view now matches the desktop view exactly (just stacked):
       cards stay transparent and only the row separators show. The
       "Highlight on Mobile" tickbox therefore no longer paints a grey
       background — that rule has intentionally been removed. */
}