/*
 * Mega menu panels from Content Manager > Menus (core/cms/core/front/navigation/mega-panel.tpl).
 *
 * The panel is shared by every theme, so its colours come from the theme that draws it:
 * Draisap's --dr-* tokens first, then the CMS colour sheet (--primary, --text, --bg) that
 * Serepok and the older themes use, then neutral fallbacks. Dark mode follows the theme's
 * html[data-theme="dark"]; Draisap's tokens already switch, the fallbacks switch here.
 */
.wn-mega {
    --wn-accent: var(--dr-accent, var(--primary, #2563eb));
    --wn-on-accent: var(--dr-on-accent, #fff);
    --wn-ink: var(--dr-ink, var(--text, #0f172a));
    --wn-ink-2: var(--dr-ink-2, color-mix(in srgb, var(--wn-ink) 78%, transparent));
    --wn-ink-3: var(--dr-ink-3, color-mix(in srgb, var(--wn-ink) 58%, transparent));
    --wn-line: var(--dr-line, color-mix(in srgb, var(--wn-ink) 11%, transparent));
    --wn-surface: var(--dr-surface, var(--bg, #fff));
    --wn-surface-2: var(--dr-surface-2, color-mix(in srgb, var(--wn-ink) 4%, var(--wn-surface)));
    --wn-tint: var(--dr-accent-tint, color-mix(in srgb, var(--wn-accent) 10%, transparent));
    --wn-radius: var(--dr-radius-control, 10px);
    --wn-radius-lg: var(--dr-radius-card, 14px);
    --wn-gap: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    width: 100%;
    margin: 0 auto;
    color: var(--wn-ink);
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
}
html[data-theme="dark"] .wn-mega {
    --wn-ink: var(--dr-ink, #e7ebf2);
    --wn-surface: var(--dr-surface, #151a23);
}
.wn-mega--w-wide { max-width: 1120px; }
.wn-mega--w-compact { max-width: 820px; }
.wn-mega.has-intro { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
.wn-mega *, .wn-mega *::before, .wn-mega *::after { box-sizing: border-box; }
.wn-mega a { text-decoration: none; }
.wn-mega ul { list-style: none; margin: 0; padding: 0; }
.wn-mega strong { font-weight: 700; }
.wn-mega p { margin: 0; }
.wn-body { min-width: 0; }

/* Intro: the item itself, on the left. */
.wn-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);
    background: var(--wn-surface-2);
}
.wn-intro__ico {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--wn-tint);
    color: var(--wn-accent);
    font-size: 18px;
}
.wn-intro strong { color: var(--wn-ink); font-size: 18px; line-height: 1.25; }
.wn-intro p { color: var(--wn-ink-2); font-size: 13.5px; }
.wn-mega .wn-intro__cta,
.wn-mega .wn-foot a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wn-accent);
    font-weight: 700;
}
.wn-intro__cta { margin-top: auto; padding-top: 6px; }
.wn-intro__cta i, .wn-foot a i { font-size: 11px; transition: transform .15s ease; }
.wn-intro__cta:hover i, .wn-foot a:hover i { transform: translateX(3px); }

/* Group heading */
.wn-mega .wn-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--wn-line);
    color: var(--wn-ink);
}
.wn-head__ico {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--wn-tint);
    color: var(--wn-accent);
    font-size: 13px;
}
.wn-head__copy { min-width: 0; }
.wn-head__copy strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wn-head__copy small { display: block; margin-top: 1px; color: var(--wn-ink-3); font-size: 12px; }
.wn-mega a.wn-head:hover strong, .wn-mega a.wn-head.is-current strong { color: var(--wn-accent); }

/* Links */
.wn-links { display: grid; gap: 2px; }
.wn-links--grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; }
.wn-mega .wn-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: var(--wn-radius);
    color: var(--wn-ink-2);
    transition: background-color .15s ease, color .15s ease;
}
.wn-mega a.wn-link:hover, .wn-mega a.wn-link:focus-visible, .wn-mega .wn-link.is-current { background: var(--wn-tint); color: var(--wn-accent); }
.wn-link__copy { min-width: 0; flex: 1 1 auto; }
.wn-link__copy strong { display: block; color: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; }
.wn-link__copy small { display: block; margin-top: 2px; color: var(--wn-ink-3); font-size: 12.5px; line-height: 1.4; }
.wn-mega .wn-link--more { align-items: center; margin-top: 4px; color: var(--wn-accent); }
.wn-link--more .wn-link__copy strong { font-weight: 700; }
.wn-link__arrow { font-size: 11px; transition: transform .15s ease; }
.wn-link--more:hover .wn-link__arrow { transform: translateX(3px); }
.wn-count, .wn-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--wn-tint);
    color: var(--wn-accent);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.6;
}
.wn-badge { margin-left: 6px; vertical-align: 1px; }
.wn-ico {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wn-surface-2);
    color: var(--wn-accent);
    font-size: 12px;
}
.wn-media { flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: var(--wn-surface-2); }
.wn-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wn-media--empty { display: grid; place-items: center; color: var(--wn-ink-3); font-size: 14px; }

/* Columns: out of twelve, like the builder's column width. */
.wn-grid--columns { display: flex; flex-wrap: wrap; gap: 24px var(--wn-gap); }
.wn-grid--columns > .wn-col { flex: 0 0 auto; width: calc((100% + var(--wn-gap)) / var(--wn-cols, 4) - var(--wn-gap)); min-width: 0; }
.wn-grid--columns > .wn-col[style*="--wn-span"] { width: calc((100% + var(--wn-gap)) * var(--wn-span) / 12 - var(--wn-gap)); }
.wn-split { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--wn-gap); align-items: start; }
.wn-split--none { grid-template-columns: minmax(0, 1fr); }
.wn-split__lead { display: grid; gap: 14px; align-content: start; }
.wn-split__rest { align-content: start; }

/* Cards */
.wn-grid--cards { display: grid; grid-template-columns: repeat(var(--wn-cols, 4), minmax(0, 1fr)); gap: 14px; }
.wn-grid--list { display: grid; grid-template-columns: repeat(var(--wn-cols, 4), minmax(0, 1fr)); gap: 24px var(--wn-gap); }
.wn-col--wide { grid-column: 1 / -1; }
.wn-mega .wn-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);
    background: var(--wn-surface);
    color: var(--wn-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wn-mega a.wn-card:hover, .wn-mega a.wn-card:focus-visible, .wn-mega .wn-card.is-current {
    border-color: color-mix(in srgb, var(--wn-accent) 45%, transparent);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--wn-ink) 45%, transparent);
    transform: translateY(-1px);
}
.wn-card__ico {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--wn-tint);
    color: var(--wn-accent);
    font-size: 16px;
}
.wn-card__media { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: var(--wn-surface-2); }
.wn-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wn-card__copy { min-width: 0; flex: 1 1 auto; }
.wn-card__copy strong { display: block; color: var(--wn-ink); font-size: 15px; line-height: 1.3; }
.wn-card__copy small { display: block; margin-top: 4px; color: var(--wn-ink-3); font-size: 13px; }
.wn-card__sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wn-card__sub span { padding: 2px 8px; border-radius: 6px; background: var(--wn-surface-2); color: var(--wn-ink-2); font-size: 12px; }
.wn-card__arrow { flex: none; margin-top: 4px; color: var(--wn-ink-3); font-size: 11px; opacity: .5; transition: transform .15s ease, opacity .15s ease, color .15s ease; }
.wn-card:hover .wn-card__arrow { color: var(--wn-accent); opacity: 1; transform: translateX(3px); }
.wn-card:hover .wn-card__copy strong { color: var(--wn-accent); }
.wn-card--big { flex-direction: column; }
.wn-card--big .wn-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wn-card--big .wn-card__arrow { display: none; }
.wn-col--card { display: flex; }
.wn-col--card > * { flex: 1 1 auto; }

/* Featured card */
.wn-featured {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);
    background: linear-gradient(145deg, color-mix(in srgb, var(--wn-accent) 13%, var(--wn-surface)), var(--wn-surface-2));
    color: var(--wn-ink);
}
.wn-featured__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.wn-featured__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wn-featured__ico {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 22px 22px 0;
    border-radius: 12px;
    background: var(--wn-accent);
    color: var(--wn-on-accent);
    font-size: 18px;
}
.wn-featured__copy { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; }
.wn-featured__copy strong { color: var(--wn-ink); font-size: 18px; line-height: 1.25; }
.wn-featured__copy p { color: var(--wn-ink-2); font-size: 13.5px; }
.wn-mega .wn-featured__btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 16px;
    border-radius: var(--wn-radius);
    background: var(--wn-accent);
    color: var(--wn-on-accent);
    font-size: 13.5px;
    font-weight: 700;
    transition: filter .15s ease;
}
.wn-mega .wn-featured__btn:hover { color: var(--wn-on-accent); filter: brightness(1.08); }
.wn-featured__btn i { font-size: 11px; }

/* A banner across the panel, under a row of cards */
.wn-mega .wn-featured--strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px;
    color: var(--wn-ink);
}
.wn-featured--strip .wn-featured__ico { flex: none; width: 40px; height: 40px; margin: 0; border-radius: 10px; font-size: 16px; }
.wn-featured__thumb { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; }
.wn-featured__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wn-featured--strip .wn-featured__copy { flex: 1 1 auto; gap: 2px; min-width: 0; padding: 0; }
.wn-featured--strip .wn-featured__copy strong { font-size: 15px; }
.wn-featured--strip .wn-featured__copy small { display: block; color: var(--wn-ink-2); font-size: 13px; }
.wn-featured__arrow { flex: none; color: var(--wn-accent); font-size: 13px; transition: transform .15s ease; }
.wn-featured--strip:hover .wn-featured__arrow { transform: translateX(3px); }

/* Tabs */
.wn-tabs { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: var(--wn-gap); min-height: 220px; }
.wn-tabs__list { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--wn-radius-lg); background: var(--wn-surface-2); align-self: start; }
.wn-mega .wn-tabs__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--wn-radius);
    color: var(--wn-ink-2);
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.wn-tabs__tab > i:first-child { width: 16px; text-align: center; color: var(--wn-ink-3); }
.wn-mega .wn-tabs__tab:hover { color: var(--wn-ink); }
.wn-mega .wn-tabs__tab.is-active { background: var(--wn-surface); color: var(--wn-accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--wn-ink) 14%, transparent); }
.wn-tabs__tab.is-active > i:first-child { color: inherit; }
.wn-tabs__caret { margin-left: auto; font-size: 10px; opacity: .45; }
.wn-tabs__pane[hidden] { display: none; }
.wn-tabs__lead { margin: 0 0 12px !important; color: var(--wn-ink-3); }

/* Showcase tiles */
.wn-grid--showcase { display: grid; grid-template-columns: repeat(var(--wn-cols, 4), minmax(0, 1fr)); gap: 18px; }
.wn-mega .wn-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--wn-ink); }
.wn-tile__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);
    background: var(--wn-surface-2);
    color: var(--wn-accent);
    font-size: 26px;
}
.wn-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.wn-tile:hover .wn-tile__media img { transform: scale(1.04); }
.wn-tile__copy strong { display: -webkit-box; overflow: hidden; color: inherit; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wn-tile__copy small { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--wn-ink-3); font-size: 12.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wn-tile:hover .wn-tile__copy strong, .wn-tile.is-current .wn-tile__copy strong { color: var(--wn-accent); }

/* Footer link */
.wn-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--wn-line); }

@media (max-width: 1199.98px) {
    .wn-mega.has-intro { grid-template-columns: minmax(0, 1fr); }
    .wn-intro { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 18px; }
    .wn-intro p { flex: 1 1 260px; }
    .wn-intro__cta { margin-top: 0; padding-top: 0; }
    .wn-grid--cards, .wn-grid--showcase, .wn-grid--list { grid-template-columns: repeat(min(var(--wn-cols, 4), 3), minmax(0, 1fr)); }
    .wn-grid--columns > .wn-col, .wn-grid--columns > .wn-col[style*="--wn-span"] { width: calc((100% + var(--wn-gap)) / min(var(--wn-cols, 4), 3) - var(--wn-gap)); }
}
@media (max-width: 991.98px) {
    .wn-split, .wn-tabs { grid-template-columns: minmax(0, 1fr); }
    .wn-grid--cards, .wn-grid--showcase, .wn-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wn-grid--columns > .wn-col, .wn-grid--columns > .wn-col[style*="--wn-span"] { width: calc((100% - var(--wn-gap)) / 2); }
}

/* Draisap's phone drawer and dropdowns, when they are drawn from the menu builder. */
.dr-drawer__sub a { display: flex; align-items: center; gap: 8px; }
.dr-drawer__sub a > i { flex: none; width: 14px; text-align: center; color: var(--dr-ink-3); font-size: 12px; }
.dr-drawer__sub a:hover > i, .dr-drawer__sub a.is-current > i { color: inherit; }
.dr-drawer__sub a .badge,
.dr-dropdown--wn .badge,
.dr-nav > li[data-menu-item-name^="wbams-nav-"] > .dr-nav__link .badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--dr-accent-tint);
    color: var(--dr-accent);
}