/* Mobile Pro Cards — shared styles */

.mpc-grid {
    /* themable tokens (overridden inline by Elementor controls) */
    --mpc-cols: 4;
    --mpc-gap: 28px;
    --mpc-accent: #d26e28;
    --mpc-title: #16324a;
    --mpc-sub: #6b7785;
    --mpc-icon: #1f4d70;
    --mpc-badge-bg: #16324a;
    --mpc-badge-fg: #ffffff;
    --mpc-card-bg: #ffffff;
    --mpc-media-1: #eef1f5;
    --mpc-media-2: #e2e7ee;
    --mpc-border: #e6e9ee;
    --mpc-radius: 14px;
    --mpc-media-h: 200px;
    --mpc-photo-overlay: rgba(16, 50, 74, .45);
    --mpc-icon-photo: #ffffff;
    --mpc-tile-bg: #eef1f5;
    --mpc-tile-icon: #1f4d70;
    --mpc-tile-size: 56px;
    --mpc-tile-radius: 12px;
    --mpc-acard-pad: 18px;
    --mpc-circle-bg: #f0f3f7;
    --mpc-circle-icon: #1f4d70;
    --mpc-circle-size: 72px;
    --mpc-fcard-pad: 28px;

    display: grid;
    grid-template-columns: repeat(var(--mpc-cols), minmax(0, 1fr));
    gap: var(--mpc-gap);
}

/* ── Card ───────────────────────────────────────────── */
.mpc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mpc-card-bg);
    border: 1px solid var(--mpc-border);
    border-radius: var(--mpc-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 18px rgba(16, 42, 67, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mpc-card--clickable { cursor: pointer; }

.mpc-card--clickable:hover,
.mpc-card--clickable:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 42, 67, .06), 0 14px 30px rgba(16, 42, 67, .12);
}

/* ── Media / icon area ──────────────────────────────── */
.mpc-card__media {
    position: relative;
    height: var(--mpc-media-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--mpc-media-1), var(--mpc-media-2));
    border-bottom: 1px solid var(--mpc-border);
}

.mpc-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-block;
    padding: 5px 11px;
    border-radius: 6px;
    background: var(--mpc-badge-bg);
    color: var(--mpc-badge-fg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

/* Background photo behind the icon */
.mpc-card__media--photo {
    background-size: cover;
    background-position: center;
}

.mpc-card__media--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mpc-photo-overlay);
}

.mpc-card__media--photo .mpc-card__badge { z-index: 2; }

.mpc-card__media--photo .mpc-card__icon {
    position: relative;
    z-index: 1;
    color: var(--mpc-icon-photo);
}

.mpc-card__icon {
    display: inline-flex;
    color: var(--mpc-icon);
}

.mpc-card__icon svg,
.mpc-card__icon i {
    width: 64px;
    height: 64px;
    font-size: 64px;
}

/* ── Body ───────────────────────────────────────────── */
.mpc-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 24px;
    flex: 1 1 auto;
}

.mpc-card__title {
    margin: 0;
    color: var(--mpc-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.mpc-card__subtitle {
    margin: 0;
    color: var(--mpc-sub);
    font-size: 14px;
    line-height: 1.5;
}

.mpc-card__link {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mpc-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.mpc-card__link:hover { text-decoration: underline; }

.mpc-card__arrow {
    font-weight: 700;
    transition: transform .18s ease;
}

.mpc-card--clickable:hover .mpc-card__arrow {
    transform: translateY(2px);
}

/* Stretched link makes the whole card the click target while keeping the
   visible link text in place. */
.mpc-card__link--stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Action card (compact icon-tile + text, whole card is the link) ── */
.mpc-acard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: var(--mpc-acard-pad) calc(var(--mpc-acard-pad) + 2px);
    background: var(--mpc-card-bg);
    border: 1px solid var(--mpc-border);
    border-radius: var(--mpc-radius);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 18px rgba(16, 42, 67, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

a.mpc-acard--clickable:hover,
a.mpc-acard--clickable:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 42, 67, .06), 0 14px 30px rgba(16, 42, 67, .12);
    outline: none;
}

.mpc-acard__icon {
    flex: 0 0 auto;
    width: var(--mpc-tile-size);
    height: var(--mpc-tile-size);
    border-radius: var(--mpc-tile-radius);
    background: var(--mpc-tile-bg);
    color: var(--mpc-tile-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpc-acard__icon svg,
.mpc-acard__icon i {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.mpc-acard__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mpc-acard__title {
    color: var(--mpc-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.mpc-acard__subtitle {
    margin-top: 3px;
    color: var(--mpc-sub);
    font-size: 13px;
    line-height: 1.4;
}

/* ── Feature card (circular icon + title + description + arrow link) ── */
.mpc-fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: var(--mpc-fcard-pad);
    background: var(--mpc-card-bg);
    border: 1px solid var(--mpc-border);
    border-radius: var(--mpc-radius);
    box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 18px rgba(16, 42, 67, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mpc-fcard--clickable { cursor: pointer; }

.mpc-fcard--clickable:hover,
.mpc-fcard--clickable:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 42, 67, .06), 0 14px 30px rgba(16, 42, 67, .12);
}

.mpc-fcard__icon {
    flex: 0 0 auto;
    width: var(--mpc-circle-size);
    height: var(--mpc-circle-size);
    border-radius: 50%;
    background: var(--mpc-circle-bg);
    color: var(--mpc-circle-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpc-fcard__icon svg,
.mpc-fcard__icon i {
    width: 30px;
    height: 30px;
    font-size: 30px;
}

.mpc-fcard__title {
    margin: 0;
    color: var(--mpc-title);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.3;
}

.mpc-fcard__desc {
    margin: 0;
    color: var(--mpc-sub);
    font-size: 14px;
    line-height: 1.6;
}

.mpc-fcard__link {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mpc-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.mpc-fcard__link:hover { text-decoration: underline; }

.mpc-fcard__arrow { transition: transform .18s ease; }
.mpc-fcard--clickable:hover .mpc-fcard__arrow { transform: translateX(3px); }

.mpc-fcard__link--stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Responsive fallback (when Elementor responsive controls aren't set) ── */
@media (max-width: 1024px) {
    .mpc-grid { --mpc-cols: 2; }
}
@media (max-width: 600px) {
    .mpc-grid { --mpc-cols: 1; }
}

/* ══════════════════════════════════════════════════════
   Path Chooser Cards
   ══════════════════════════════════════════════════════ */
.mpc-paths {
    --mpc-cols: 3;
    --mpc-gap: 20px;
    --mpc-accent: #1e6031;
    --mpc-card-bg: #ffffff;
    --mpc-border: #dbdcdc;
    --mpc-title: #4c4e52;
    --mpc-sub: #818a92;
    --mpc-title-on: #ffffff;
    --mpc-sub-on: rgba(255, 255, 255, .82);
    --mpc-radius: 6px;
    --mpc-path-pad: 24px;

    display: grid;
    grid-template-columns: repeat(var(--mpc-cols), minmax(0, 1fr));
    gap: var(--mpc-gap);
}

.mpc-path {
    display: flex;
    flex-direction: column;
    /* Children stretch to the card's width so text wraps inside it. With
       align-items: flex-start each line would size to its max-content width
       and spill past the card instead. */
    align-items: stretch;
    /* The card is a <button>, and the UA stylesheet gives buttons
       white-space: nowrap — which the title and description inherit, so no
       amount of width fixing will make them wrap without this. */
    white-space: normal;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: var(--mpc-path-pad);
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: var(--mpc-card-bg);
    border: 2px solid var(--mpc-border);
    border-radius: var(--mpc-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: border-color .18s ease, background-color .18s ease;
}

/* Declared explicitly so a theme's bare `button:hover` / `button:focus` rule
   can't repaint the card (the Vamtam reset sets both to #c36). :focus matters
   as much as :hover here — it persists after the card is clicked. */
.mpc-path:hover,
.mpc-path:focus {
    background: var(--mpc-card-bg-hover, var(--mpc-card-bg));
    border-color: var(--mpc-border-hover, var(--mpc-accent));
    color: inherit;
}

.mpc-path:focus-visible {
    outline: 2px solid var(--mpc-accent);
    outline-offset: 2px;
}

.mpc-path.is-active,
.mpc-path.is-active:hover,
.mpc-path.is-active:focus {
    background: var(--mpc-accent);
    border-color: var(--mpc-accent);
}

.mpc-path__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Opt out of the stretch above so the tile stays square. */
    align-self: flex-start;
    width: var(--mpc-icon-tile, 40px);
    height: var(--mpc-icon-tile, 40px);
    border-radius: 4px;
    background: rgba(0, 0, 0, .05);
    color: var(--mpc-icon, var(--mpc-accent));
}

.mpc-path__icon svg {
    width: var(--mpc-icon-size, 20px);
    height: var(--mpc-icon-size, 20px);
}

.mpc-path__icon i {
    font-size: var(--mpc-icon-size, 20px);
    line-height: 1;
}

/* Paint monochrome SVGs with the card's text color so they flip light on a
   dark card. Presentation attributes (fill="#000") lose to these rules.
   Only elements that declare their own paint are overridden — anything without
   a fill/stroke attribute keeps inheriting, so an outline icon that sets
   fill="none" once on the root stays an outline instead of filling in. */
.mpc-path__icon svg:not([fill="none"]),
.mpc-path__icon svg [fill]:not([fill="none"]) { fill: currentColor; }

.mpc-path__icon svg[stroke]:not([stroke="none"]),
.mpc-path__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

.mpc-path.is-active .mpc-path__icon {
    background: rgba(255, 255, 255, .15);
    color: var(--mpc-icon-on, #ffffff);
}

/* min-width: 0 lets these shrink below their content width inside the flex
   column; overflow-wrap catches unbroken strings (long URLs, product codes)
   that have no space to wrap at. */
.mpc-path__title,
.mpc-path__desc {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.mpc-path__title {
    color: var(--mpc-title);
    font-size: 21px;
    line-height: 1.25;
}

.mpc-path__desc {
    color: var(--mpc-sub);
    font-size: 14px;
    line-height: 1.5;
}

.mpc-path.is-active .mpc-path__title { color: var(--mpc-title-on); }
.mpc-path.is-active .mpc-path__desc  { color: var(--mpc-sub-on); }

@media (max-width: 767px) {
    .mpc-paths { --mpc-cols: 1; --mpc-path-pad: 20px; }
}