/*
 * Hele Patterns — lightweight card system
 * Transferable across sites: redefine the custom properties below to re-theme.
 */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/outfit-variable.woff2') format('woff2-variations');
}

:root {
    --hele-accent: #e63948;
    --hele-accent-hover: #c92f3d;
    --hele-accent-soft: rgba(230, 57, 72, 0.1);
    --hele-ink: #1f2933;
    --hele-muted: #52606d;
    --hele-card-bg: #ffffff;
    --hele-border: rgba(31, 41, 51, 0.12);
    --hele-border-hover: rgba(230, 57, 72, 0.45);
    --hele-radius: 12px;
    --hele-font-accent: 'Outfit', sans-serif;
    --hele-transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Buttons intentionally match the site's existing global button colour
       (Kadence Customizer > Buttons) rather than the card accent, so every
       button on the site still reads as one consistent design. */
    --hele-btn-bg: #ffb23f;
    --hele-btn-bg-hover: #f5a020;
    --hele-btn-color: #1f2933;
    --hele-card-padding: 24px;
}

/* ---------- Container ----------
   Our own content width, independent of Kadence's row/inheritMaxWidth
   system. Matches the theme's current content width (1290px + 1.5rem edge
   spacing) so it lines up with the header title above it, but from here on
   this value is ours to change — it doesn't depend on any Kadence block
   attribute resolving correctly. */
.hele-container {
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}
.hele-section {
    margin: 0 0 40px;
}
.hele-section:first-child {
    margin-top: 28px;
}

/* ---------- Grid ---------- */
.hele-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 24px;
    align-items: stretch;
}
.hele-card-grid.hele-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hele-card-grid.hele-cols-1 { grid-template-columns: 1fr; }

/* Card rows are built from core/columns, and each .hele-card *is* the
   core/column itself (see hele_card() -- core/group was dropped because it
   always wraps children in an inner-container div, one layer too deep for
   any of this card's own flex rules to reach). The theme sets its own
   align-items on .wp-block-columns (usually flex-start), which is what was
   letting cards sit at their own natural height instead of matching their
   row -- override it explicitly so the card, as a direct flex item, stretches
   to the row's tallest sibling. */
.hele-card-grid.wp-block-columns {
    align-items: stretch !important;
}

@media (max-width: 900px) {
    .hele-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .hele-card-grid,
    .hele-card-grid.hele-cols-2 { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.hele-card {
    background: var(--hele-card-bg);
    border: 1px solid var(--hele-border);
    border-radius: var(--hele-radius);
    padding: var(--hele-card-padding);
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 15px rgba(31, 41, 51, 0.05);
    transition: var(--hele-transition);
    position: relative;
    overflow: hidden;
    /* No explicit height here on purpose: align-items:stretch on the row
       only stretches a flex item whose cross-axis size computes to `auto`.
       A percentage height (even 100%) counts as "specified", so it was
       quietly opting this card *out* of the stretch algorithm and falling
       back to its own content height instead -- exactly the "not all equal
       height" bug. Let stretch do the sizing; don't fight it with height. */
    height: auto;
    align-self: stretch !important;
    box-sizing: border-box;
}
.hele-card:hover {
    border-color: var(--hele-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(31, 41, 51, 0.1);
}
.hele-card.hele-card-featured {
    border: 2px solid var(--hele-accent);
    box-shadow: 0 10px 25px var(--hele-accent-soft);
}

/* Every direct child sits above the watermark icon (see below) — except the
   ribbon wrapper, which manages its own absolute position and stacking. */
.hele-card > *:not(.hele-ribbon-wrap) { position: relative; z-index: 1; }

/* ---------- Watermark icon ----------
   Large, faint icon sat behind a card's content for visual texture.
   Add e.g. class="hele-card hele-watermark-bolt" to the card's group block. */
.hele-card[class*="hele-watermark-"]::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -18px;
    bottom: -18px;
    width: 140px;
    height: 140px;
    background-color: var(--hele-ink);
    opacity: 0.05;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}
.hele-watermark-bolt::after           { -webkit-mask-image: url('../icons/bolt.svg');           mask-image: url('../icons/bolt.svg'); }
.hele-watermark-steering-wheel::after { -webkit-mask-image: url('../icons/steering-wheel.svg');  mask-image: url('../icons/steering-wheel.svg'); }
.hele-watermark-car::after            { -webkit-mask-image: url('../icons/car.svg');             mask-image: url('../icons/car.svg'); }
.hele-watermark-clock::after          { -webkit-mask-image: url('../icons/clock-hour-4.svg');    mask-image: url('../icons/clock-hour-4.svg'); }
.hele-watermark-map-pin::after        { -webkit-mask-image: url('../icons/map-pin-check.svg');   mask-image: url('../icons/map-pin-check.svg'); }
.hele-watermark-road::after           { -webkit-mask-image: url('../icons/road.svg');            mask-image: url('../icons/road.svg'); }

/* ---------- Corner ribbon ----------
   The reference plugin's exact geometry (125x125 wrap, ribbon at
   top:22/right:-36/width:165/font-size:8px) measured identically on their
   live site and produced an all-but-illegible strip on ours -- their card
   is a large image tile, ours is a small text card, so the same absolute
   pixel values don't carry over as directly as the numbers alone suggest.
   Sized up and pulled further from the corner instead of chasing the exact
   reference numbers. */
.hele-ribbon-wrap {
    position: absolute !important;
    z-index: 3 !important;
    top: calc(-1 * var(--hele-card-padding)) !important;
    right: calc(-1 * var(--hele-card-padding)) !important;
    left: auto !important;
    bottom: auto !important;
    width: 140px !important;
    height: 140px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
}
.hele-ribbon {
    position: absolute !important;
    top: 30px !important;
    right: -28px !important;
    left: auto !important;
    bottom: auto !important;
    width: 170px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    text-align: center !important;
    transform: rotate(45deg) !important;
    font-family: var(--hele-font-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.hele-ribbon-new { background: #2f9e44; }
.hele-ribbon-popular { background: var(--hele-btn-bg); color: var(--hele-ink); }

.hele-card-badge {
    align-self: flex-start;
    display: inline-block;
    padding: 4px 10px;
    margin: 0 0 12px;
    font-family: var(--hele-font-accent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hele-accent);
    background: var(--hele-accent-soft);
    border-radius: 4px;
}

.hele-card-title {
    margin: 0 0 4px;
    font-family: var(--hele-font-accent);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--hele-ink);
    line-height: 1.3;
}

.hele-card-price {
    margin: 0 0 12px;
    font-family: var(--hele-font-accent);
    font-size: 2rem;
    font-weight: 700;
    color: var(--hele-accent);
    line-height: 1.1;
}
.hele-card-price .hele-card-price-unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hele-muted);
    margin-left: 4px;
}

.hele-card-desc {
    margin: 0 0 16px;
    font-size: 0.92rem;
    color: var(--hele-muted);
    line-height: 1.5;
}

.hele-card-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-grow: 1;
}
.hele-card-list li {
    position: relative;
    padding: 0 0 10px 24px;
    font-size: 0.92rem;
    color: var(--hele-ink);
    line-height: 1.4;
}
.hele-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hele-accent-soft);
}
.hele-card-list li::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.44em;
    width: 10px;
    height: 10px;
    background-color: var(--hele-accent);
    -webkit-mask-image: url('../icons/check.svg');
    mask-image: url('../icons/check.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hele-card-footer {
    margin: 0 0 16px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--hele-muted);
}

.hele-card-actions {
    margin-top: auto;
}
/* Cards use core/buttons > core/button so the block editor stays in control
   of the link. That means the actual <a> is a `.wp-block-button__link`
   *inside* the classed wrapper `.wp-block-button.hele-btn` — and by default
   that inner link inherits the theme's own global button style (Kadence
   Customizer > Buttons), which is what was showing through as a second,
   mismatched pill. Neutralise the wrapper and style the inner link directly
   so there's exactly one visible button, not two stacked ones. */
.hele-card-actions.wp-block-buttons { gap: 0; }
.hele-card-actions .wp-block-button.hele-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Default: the button hugs its own text with normal padding, so it stays a
   sensible size in a wide container like a bento tile. Price cards below
   override this back to a full-width footer button, which is what suits a
   narrow card. */
.hele-card-actions .wp-block-button.hele-btn .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    background: var(--hele-btn-bg) !important;
    color: var(--hele-btn-color) !important;
    font-family: var(--hele-font-accent);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: var(--hele-transition);
}
.hele-card-actions .wp-block-button.hele-btn .wp-block-button__link:hover {
    background: var(--hele-btn-bg-hover) !important;
    color: var(--hele-btn-color) !important;
    transform: translateY(-2px);
}
.hele-card-actions .wp-block-button.hele-btn-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--hele-ink) !important;
    border: 1px solid var(--hele-border) !important;
}
/* Price cards want their footer button to run the full card width, unlike
   the content-sized default above. */
.hele-card .hele-card-actions .wp-block-button.hele-btn,
.hele-card .hele-card-actions .wp-block-button.hele-btn .wp-block-button__link {
    width: 100%;
}
.hele-card-actions .wp-block-button.hele-btn-outline .wp-block-button__link:hover {
    border-color: var(--hele-btn-bg) !important;
    background: rgba(255, 178, 63, 0.12) !important;
}

/* ---------- Compact banner variant ----------
   For a short-lived offer that shouldn't take a full card's height —
   lays the badge/title/price/button out in a single row on desktop. */
.hele-card-banner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 28px;
    padding: 18px 24px 28px;
}
/* Force the badge onto a line by itself: a flex item with flex-basis:100%
   always wraps the line after it, which is what guarantees title/price/
   button end up together on the row below instead of competing for space
   with the badge and having the button lose that fight and wrap under. */
.hele-card-banner .hele-card-badge {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 0 0 4px !important;
}
.hele-card-banner .hele-card-title {
    margin: 0 !important;
    font-size: 1.05rem;
    flex: 0 1 auto !important;
    width: auto !important;
}
.hele-card-banner .hele-card-price {
    margin: 0 !important;
    font-size: 1.5rem;
    flex: 0 0 auto !important;
    width: auto !important;
}
.hele-card-banner .hele-card-list,
.hele-card-banner .hele-card-footer { display: none !important; }
.hele-card-banner .hele-card-actions {
    margin: 0 0 0 auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
.hele-card-banner .hele-card-actions .wp-block-button__link {
    width: auto !important;
    padding: 10px 24px !important;
    white-space: nowrap;
}

/* A small car drives along the banner's bottom edge, purely decorative */
.hele-card-banner::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 6px;
    width: 22px;
    height: 22px;
    background-color: var(--hele-accent);
    opacity: 0.55;
    -webkit-mask-image: url('../icons/car.svg');
    mask-image: url('../icons/car.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
    animation: hele-drive 10s linear infinite;
}
@keyframes hele-drive {
    0%   { left: 0; }
    100% { left: calc(100% - 22px); }
}
@media (prefers-reduced-motion: reduce) {
    .hele-card-banner::before { animation: none; left: 16px; }
}
@media (max-width: 640px) {
    .hele-card-banner { flex-direction: column; align-items: stretch; }
    .hele-card-banner .hele-card-actions { margin: 8px 0 0; width: 100%; }
    .hele-card-banner .hele-card-actions .wp-block-button__link { width: 100% !important; }
}

/* ---------- Date-card variant ---------- */
.hele-card-date {
    font-family: var(--hele-font-accent);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hele-ink);
    margin: 0 0 4px;
}
.hele-card-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hele-accent);
    margin: 0 0 16px;
}

/* ==========================================================
   Bento boxes -- a second, general-purpose content grid.
   Independent of the price-card system above, but shares its tokens
   (colours, radius, font) so the two read as one family.

   Markup: build as core/columns (className hele-bento-grid, optionally
   +hele-bento-cols-2/3) containing core/column tiles (className
   hele-bento + a colour variant + optionally a span/icon modifier). Use
   core/column, not core/group, for the grid and every tile -- core/group
   wraps its children in an extra .wp-block-group__inner-container div on
   this WP version regardless of its layout attribute, which silently
   breaks any CSS that assumes direct children (grid-column:span included).
   This is the same reason the price cards use core/column, not core/group.
   ========================================================== */
.hele-bento-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 0 24px;
    align-items: stretch !important;
}
.hele-bento-grid.hele-bento-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.hele-bento-grid.hele-bento-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 780px) {
    .hele-bento-grid.hele-bento-cols-2,
    .hele-bento-grid.hele-bento-cols-3 { grid-template-columns: 1fr !important; }
    .hele-bento-span-2, .hele-bento-span-3 { grid-column: span 1 !important; }
}

/* A tile spanning 2 or 3 grid tracks -- add alongside hele-bento to make
   one tile in a row wider than its siblings, the way an actual bento box
   varies in size. Only meaningful inside hele-bento-cols-2/3. */
.hele-bento-span-2 { grid-column: span 2 !important; }
.hele-bento-span-3 { grid-column: span 3 !important; }

.hele-bento {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--hele-radius);
    padding: 32px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: var(--hele-transition);
}
.hele-bento > * { position: relative; z-index: 1; }

/* ---------- Colour variants ----------
   Reuse the site's own palette rather than inventing new colours: navy
   (--hele-ink) and the card accent red are both already load-bearing
   brand colours elsewhere on the site. "light" is the deliberate reverse
   -- dark text on a near-white tile -- for contrast against the two
   solid-colour ones either side of it in a row. */
.hele-bento-dark {
    background: var(--hele-ink);
    color: #ffffff;
}
.hele-bento-accent {
    background: var(--hele-accent);
    color: #ffffff;
}
.hele-bento-amber {
    background: var(--hele-btn-bg);
    color: var(--hele-ink);
}
.hele-bento-light {
    background: var(--hele-card-bg);
    border: 1px solid var(--hele-border);
    color: var(--hele-ink);
}
.hele-bento-dark .hele-bento-title,
.hele-bento-accent .hele-bento-title,
.hele-bento-amber .hele-bento-title,
.hele-bento-light .hele-bento-title { color: inherit; }

.hele-bento-title {
    font-family: var(--hele-font-accent);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.25;
}
.hele-bento-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 16px;
    opacity: 0.92;
}
.hele-bento-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hele-bento-list li {
    position: relative;
    padding: 0 0 10px 24px;
    font-size: 0.92rem;
    line-height: 1.45;
}
.hele-bento-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 10px;
    height: 10px;
    background-color: currentColor;
    opacity: 0.85;
    -webkit-mask-image: url('../icons/check.svg');
    mask-image: url('../icons/check.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.hele-bento a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Watermark icon ----------
   Same technique as the price card watermark, but larger and tuned per
   background: a light tint on the two solid-colour variants, a dark tint
   on the light one -- so it reads as texture, not noise, on either. */
.hele-bento[class*="hele-bento-icon-"]::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -24px;
    bottom: -24px;
    width: 190px;
    height: 190px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}
.hele-bento-dark[class*="hele-bento-icon-"]::after,
.hele-bento-accent[class*="hele-bento-icon-"]::after,
.hele-bento-amber[class*="hele-bento-icon-"]::after {
    background-color: #ffffff;
    opacity: 0.1;
}
.hele-bento-light[class*="hele-bento-icon-"]::after {
    background-color: var(--hele-ink);
    opacity: 0.05;
}
.hele-bento-icon-bolt::after            { -webkit-mask-image: url('../icons/bolt.svg');           mask-image: url('../icons/bolt.svg'); }
.hele-bento-icon-steering-wheel::after  { -webkit-mask-image: url('../icons/steering-wheel.svg');  mask-image: url('../icons/steering-wheel.svg'); }
.hele-bento-icon-car::after             { -webkit-mask-image: url('../icons/car.svg');             mask-image: url('../icons/car.svg'); }
.hele-bento-icon-clock::after           { -webkit-mask-image: url('../icons/clock-hour-4.svg');    mask-image: url('../icons/clock-hour-4.svg'); }
.hele-bento-icon-map-pin::after         { -webkit-mask-image: url('../icons/map-pin-check.svg');   mask-image: url('../icons/map-pin-check.svg'); }
.hele-bento-icon-road::after            { -webkit-mask-image: url('../icons/road.svg');            mask-image: url('../icons/road.svg'); }