/* Vivly Living — contact details card (shared component, Phase 8 extraction).
   EVERY rule below was MOVED property-for-property identical from
   css/contact.css v0.8.0 Block 2 (+ its responsive card rules) — provenance
   comments (frame node reads, Liam's live-review values) moved with their
   rules. Markup: template-parts/contact-card.php. Consumers:
   template-contact.php, template-enquiry.php. The card's stacked-layout
   rules (order/width at ≤1024, padding at ≤767) live HERE so every
   consuming page's column grid gets the same behaviour. */

/* ── Block 2: Details card (node 39:2078/39:2172) ────────────────────────
   500 wide (matches the grid column, so no width needed at desktop —
   ≤1024 sets it explicitly once the column collapses, block 6). Height is
   deliberately NOT fixed at the node's 604: the hours list is an ACF
   repeater (contact-card.php, vl_contact_hours) that can carry more or
   fewer rows than the 7 shown in the frame, and the notice/address/contacts
   blocks each hide independently when their field is empty — a fixed
   height would clip or float-short depending on what's filled in. Padding
   and gap between blocks are derived (no vertical reads beyond the row
   pitch below), flagged for live review. */
.vl-contact-card {
    display: flex;
    flex-direction: column;
    /* Block gaps are per-block margins, NOT a uniform flex gap (corrected at
       Liam's live review 2026-07-29: the card "didn't match perfectly"). The
       frame's gaps are all different, derived from node y-values (card y681,
       all nodes inside 39:2172):
         heading  y726 h28 -> bottom 754; contacts y778   =  24px
         email    y811 h22 -> bottom 833; address  y877   =  44px
         address  y877 h28 -> bottom 905; hours    y930   =  25px
         Sunday   y1146 h22 -> bottom 1168; notice y1213  =  45px
       Padding was node-derived (45 top / 29 sides / 50 bottom); Liam set it
       to a round 50/30 live (2026-07-29), with 50/20 on mobile where the
       sitewide --vl-edge also drops 40 -> 20. */
    padding: 50px 30px;
    background: var(--vl-cornflower);
    border-radius: 20px; /* node 39:2078, exact */
    color: var(--vl-black); /* node fill is literally #000000 (same convention as dev-plots.css/dev-anchor.css) */
}

.vl-contact-card__heading,
.vl-contact-card__address {
    margin: 0; /* per-block gaps live on the following block's margin-top (see the card rule) */
    /* LEFT aligned, not centred — corrected at Liam's live review 2026-07-29.
       The Figma-to-code output carried `text-center` on both, which I read as
       "centred in the card". It isn't: that class is the text alignment INSIDE
       an auto-width box that hugs its own text, so it renders as a no-op. The
       node geometry proves they are left-positioned — the heading's centre is
       x338 and the address's is x370, which are different from each other AND
       from the card's own centre (x410); two genuinely centred items would
       share one centre. Both sit at the card's content inset (address x189
       exactly; the heading's x194 is a ~5px leading-space artefact in the
       text node, not a different inset). */
    font-size: var(--vl-text-card-title); /* 24px, node-exact */
    font-weight: var(--vl-weight-semibold);
    line-height: 28px; /* node-exact, 24/28 */
}

/* Contacts (Phone/Email) and Hours share the same 18/22 regular row style;
   only their column widths differ, because the two lists' labels are
   different widths ("Phone us:"/"Email us:" vs the day names).
   Grid math (both use a FIXED first-column width, not auto+gap, so the
   value column lands on the frame's exact x-read rather than wherever the
   rendered label text happens to end):
     dt column starts at the card's own 29px left inset (39:2172: label col
     x189, card x160 -> 189-160=29, matches the padding-left above).
     .vl-contact-card__contacts: value at x274 -> 274-160=114 inset;
       114 − 29(padding-left) = 85px first-column width.
     .vl-contact-card__hours: value at x293 -> 293-160=133 inset (the
       brief's own stated "hours value inset 133px"); 133 − 29 = 104px
       first-column width.
   Row pitch: node states 36px pitch for the HOURS list explicitly; the
   SAME 18/22 row style is used for Contacts (only 2 rows) so the same
   pitch is applied there too (no separate reading for a 2-row list, and
   it is the same row construction) — flagged as an extrapolation.
   36px pitch − 22px line-height = 14px row-gap (both dl's). */
.vl-contact-card__contacts,
.vl-contact-card__hours {
    display: grid;
    row-gap: 14px; /* 36px pitch − 22px line-height, node 39:2172 */
    font-size: var(--vl-text-body); /* 18px, node-exact */
    font-weight: var(--vl-weight-regular);
    line-height: 22px; /* node-exact, 18/22 */
}

.vl-contact-card__contacts {
    grid-template-columns: 85px 1fr; /* see column math above */
    margin-top: 24px; /* heading bottom 754 -> phone row 778 */
    /* 33px pitch here, NOT the hours' 36 (node: phone y778 -> email y811) —
       corrected 2026-07-29; the earlier code extrapolated the hours pitch
       onto this 2-row list, which the frame does not do. */
    row-gap: 11px; /* 33px pitch − 22px line-height */
}

.vl-contact-card__address {
    margin-top: 44px; /* email bottom 833 -> address 877 */
}

.vl-contact-card__hours {
    grid-template-columns: 104px 1fr; /* see column math above */
    margin-top: 25px; /* address bottom 905 -> Monday 930 */
}

.vl-contact-card__contacts dt,
.vl-contact-card__contacts dd,
.vl-contact-card__hours dt,
.vl-contact-card__hours dd {
    margin: 0;
}

/* Email underlined, phone not — node shows only the email link underlined
   (spec doc §3); both inherit the ambient black (base.css: a { color:
   inherit }), so no colour override here. */
.vl-contact-card__email {
    text-decoration: underline;
}

.vl-contact-card__notice {
    margin: 45px 0 0; /* Sunday bottom 1168 -> notice 1213 (set HERE, not in a
                          separate rule earlier: this rule comes later in the
                          file and its `margin: 0` would have cancelled one) */
    font-size: var(--vl-text-body); /* 18px */
    font-weight: var(--vl-weight-semibold); /* node: notice is SemiBold, unlike the regular rows around it */
    line-height: 22px;
}

@media (max-width: 1024px) {
    .vl-contact-card {
        order: 2; /* second once stacked — see the .vl-contact__form order note above */
        /* Full width once the two are on a row each (Liam, 2026-07-29). The
           500px cap here was a derived hold-over from the desktop grid
           column; stacked, the card is a full-width band like the form above
           it, so nothing is left floating at 500px in a 984px row. */
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* Card side padding 30 -> 20px (Liam, 2026-07-29), tracking the sitewide
       --vl-edge step (40 -> 20) so the card's inner gutter and the page's
       outer one stay in proportion on a phone. */
    .vl-contact-card {
        padding: 50px 20px;
    }
}