/* Direct Lines — classes/widgets/DirectLines/direct-lines.php
   vw on the 1440 canvas like hero.css; px from 1024 down.
   The Columns control writes --dln-cols for each breakpoint itself, plus a
   class per device (dln--cols-N, dln-tablet--cols-N, dln-mobile--cols-N) that
   the bottom of this file reads to stack rows once their columns get narrow.

   Not container queries: size containment zeroes a row's intrinsic width,
   and inside an Elementor container set to column + wrap, Chrome measures the
   widget's height at that width — every line wraps per character and the
   widget reserves thousands of pixels of empty space below the card. */

.dln {
    --dln-ink: #16293a;
    --dln-name: #16293a;
    --dln-body: #8a94a6;
    --dln-number: #16293a;
    --dln-number-hover: #c9a961;
    --dln-gold: #c9a961;
    --dln-card: #ffffff;
    --dln-row-hover: #fbf9f4;
    --dln-line: #e6e8ee;
    --dln-rule: #e6e8ee;
    --dln-btn-bg: #f1f2f4;
    --dln-btn-ink: #16293a;
    --dln-btn-bg-hover: #e8b64a;
    --dln-btn-ink-hover: #16293a;
    --dln-head-gap: 1.6vw;
    --dln-cols: 1;
    --dln-radius: .83vw;
    --dln-shadow: 0 10px 30px rgba(22, 41, 58, .05);
    --dln-gap-x: 1.4vw;
    --dln-gap-y: 1.4vw;
    box-sizing: border-box;
    width: 100%;
    font-family: var(--thm-body-font, "Sora", sans-serif);
}

.dln *,
.dln *::before,
.dln *::after {
    box-sizing: border-box;
}

/* ===== Heading ===== */

.dln__head {
    display: flex;
    align-items: center;
    gap: .9vw;
    margin-bottom: var(--dln-head-gap);
}

/* the line sits halfway through the gap, so the heading and the card stay
   evenly spaced from it */
.dln--rule .dln__head {
    padding-bottom: var(--dln-head-gap);
    border-bottom: 1px solid var(--dln-rule);
}

.dln__head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: max(18px, 1.53vw);
    height: max(18px, 1.53vw);
    font-size: max(18px, 1.53vw);
    color: var(--dln-gold);
}

.dln__head-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.dln__title {
    margin: 0;
    font-family: var(--thm-body-font, "Sora", sans-serif);
    font-size: max(15px, 1.32vw);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--dln-ink);
}

/* ===== Card ===== */

/* Each row draws its own bottom and right hairline and reaches 1px past its
   track; the card clips the overhang, so the outer edge is drawn once by the
   card's border and the inner ones by the rows, at any column count. */
.dln__card {
    display: grid;
    grid-template-columns: repeat(var(--dln-cols), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: var(--dln-card);
    border: 1px solid var(--dln-line);
    border-radius: var(--dln-radius);
    box-shadow: var(--dln-shadow);
}

.dln__row {
    min-width: 0;
    margin: 0 -1px -1px 0;
    padding: 1.1vw 1.5vw;
    border-right: 1px solid var(--dln-line);
    border-bottom: 1px solid var(--dln-line);
    transition: background-color .25s ease, border-color .25s ease;
}

.dln__row:hover {
    background: var(--dln-row-hover);
}

/* the two layouts are switched through variables, so each breakpoint rule at
   the bottom only has to flip two values */
.dln__row-in {
    display: grid;
    grid-template-columns: var(--dln-tpl, minmax(0, 1fr) auto auto);
    grid-template-areas: var(--dln-areas, "who num call");
    align-items: center;
    column-gap: 2.2vw;
    row-gap: 6px;
}

/* Separate cards: the card steps back to a plain grid with gaps, and every
   row draws its own border, corners and shadow. */
.dln--style-separate .dln__card {
    gap: var(--dln-gap-y) var(--dln-gap-x);
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dln--style-separate .dln__row {
    margin: 0;
    background: var(--dln-card);
    border: 1px solid var(--dln-line);
    border-radius: var(--dln-radius);
    box-shadow: var(--dln-shadow);
}

.dln--style-separate .dln__row:hover {
    background: var(--dln-row-hover);
}


.dln__who {
    grid-area: who;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dln__name {
    font-size: max(16px, 1.53vw);
    font-weight: 600;
    line-height: 1.25;
    color: var(--dln-name);
    overflow-wrap: anywhere;
}

.dln__label {
    margin-top: .3vw;
    font-size: max(13px, 1.18vw);
    font-weight: 400;
    line-height: 1.3;
    color: var(--dln-body);
}

.dln__number {
    grid-area: num;
    font-size: max(16px, 1.6vw);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--dln-number);
    text-decoration: none;
    transition: color .25s ease;
}

a.dln__number:hover,
a.dln__number:focus-visible {
    color: var(--dln-number-hover);
    text-decoration: none;
}

.dln__call {
    grid-area: call;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: max(42px, 3.75vw);
    height: max(42px, 3.75vw);
    border-radius: 50%;
    background: var(--dln-btn-bg);
    color: var(--dln-btn-ink);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.dln__call:hover,
.dln__call:focus-visible {
    background: var(--dln-btn-bg-hover);
    color: var(--dln-btn-ink-hover);
    transform: translateY(-2px);
}

.dln__call-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(16px, 1.39vw);
    height: max(16px, 1.39vw);
    font-size: max(16px, 1.39vw);
}

.dln__call-icon svg {
    width: 100%;
    height: 100%;
}

.dln__call-icon i {
    font-size: inherit;
    line-height: 1;
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .dln--animated .dln__head,
    .dln--animated .dln__card {
        animation: dln-up .6s cubic-bezier(.22, 1, .36, 1) both;
    }

    .dln--animated .dln__card { animation-delay: .12s; }
}

@keyframes dln-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

    .dln {
        --dln-head-gap: 18px;
        --dln-radius: 12px;
        --dln-gap-x: 16px;
        --dln-gap-y: 16px;
    }

    .dln__head {
        gap: 10px;
    }

    .dln__head-icon {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }

    .dln__title {
        font-size: 16px;
    }

    .dln__row {
        padding: 14px 18px;
    }

    .dln__row-in {
        column-gap: 20px;
    }

    .dln__name {
        font-size: 18px;
    }

    .dln__label {
        margin-top: 4px;
        font-size: 14px;
    }

    .dln__number {
        font-size: 18px;
    }

    .dln__call {
        width: 46px;
        height: 46px;
    }

    .dln__call-icon {
        width: 18px;
        height: 18px;
        font-size: 18px;
    }
}

@media (max-width: 600px) {

    .dln {
        --dln-gap-x: 12px;
        --dln-gap-y: 12px;
    }

    .dln__row {
        padding: 12px 14px;
    }

    .dln__name {
        font-size: 16px;
    }

    .dln__label {
        font-size: 13px;
    }

    .dln__number {
        font-size: 16px;
    }

    .dln__call {
        width: 44px;
        height: 44px;
    }
}

/* ===== Stacked rows =====
   The number drops under the label so a long name never shares its line,
   and the call button stays on the right, centred on both. Used wherever a
   column gets too narrow for one line: 3+ columns on desktop, 2+ on tablet
   or mobile, and every phone. Breakpoints match Elementor's 1024 / 767. */

@media (min-width: 1025px) {
    .dln--cols-3,
    .dln--cols-4 {
        --dln-tpl: minmax(0, 1fr) auto;
        --dln-areas: "who call" "num call";
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .dln-tablet--cols-2,
    .dln-tablet--cols-3,
    .dln-tablet--cols-4 {
        --dln-tpl: minmax(0, 1fr) auto;
        --dln-areas: "who call" "num call";
    }
}

@media (max-width: 767px) {
    .dln-mobile--cols-2,
    .dln-mobile--cols-3,
    .dln-mobile--cols-4 {
        --dln-tpl: minmax(0, 1fr) auto;
        --dln-areas: "who call" "num call";
    }
}

@media (max-width: 600px) {
    .dln {
        --dln-tpl: minmax(0, 1fr) auto;
        --dln-areas: "who call" "num call";
    }

    .dln__row-in {
        column-gap: 14px;
    }
}