/* ============================================================
   Why You'll Love It — frontend section CSS (v1.5.20+).
   Replaces the Divi Theme Builder modules that previously
   read raw post meta via custom_meta_why_youll_love_0_* tokens.

   Markup is shape-agnostic: a single .wyl-section gets marker /
   layout / aspect / chrome modifier classes from PHP. Grid uses
   named template areas so each layout variant only needs to
   redefine grid-template-columns + grid-template-areas.
   ============================================================ */

/* ============================================================
   CARD SHELL (default chrome) — same card family as How To Use,
   but a touch warmer + softer-cornered so the two stacked
   sections don't read as one block:
     - background #fefdfb (subtle warm tint vs HTU's pure white)
     - 24px radius (vs HTU's 20px)
     - slightly softer shadow
     - +4px vertical padding for breathing room
   Combined with the burgundy bullet titles + small accent line
   under the title (below), these small shifts give WYLI its own
   visual identity without redesigning the composition.
   ============================================================ */
.wyl-section {
    background: #fefdfb;
    border-radius: 24px;
    padding: 32px 40px;
    margin: 32px auto;
    width: 80%;
    box-shadow: 0 2px 24px rgba(31, 31, 31, 0.05);
    box-sizing: border-box;
}

/* Chrome variants */
.wyl-chrome-cream {
    background: #f8f5f1;
    box-shadow: none;
}
.wyl-chrome-none {
    background: transparent;
    box-shadow: none;
    padding: 32px 0;
    border-radius: 0;
    width: 100%;
    max-width: 1100px;
}

/* ============================================================
   TITLE — same Geologica weight as HTU, with a small burgundy
   accent line beneath. The accent is a quiet visual signature
   that HTU doesn't carry, so the two stacked titles read as
   "from the same brand" rather than "the same section twice".
   ============================================================ */
.wyl-title {
    font-family: 'Geologica', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1f1f1f;
    text-align: center;
    margin: 0 0 28px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.wyl-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: #851625;
    margin: 14px auto 0;
    border-radius: 1px;
}

/* ============================================================
   GRID — three named areas. Each layout variant redefines
   columns + areas. Mobile collapses everything to a single
   column with image first.
   ============================================================ */
.wyl-grid {
    display: grid;
    align-items: center;
    gap: 32px;
}

/* Center (default) — bullets left | image | bullets right */
.wyl-layout-center .wyl-grid,
.wyl-grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left image right";
}

/* Image top — image full width above, bullets in 2 columns below */
.wyl-layout-image-top .wyl-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "image image"
        "left  right";
    gap: 28px 32px;
}

/* Image bottom — bullets in 2 columns above, image full width below */
.wyl-layout-image-bottom .wyl-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "left  right"
        "image image";
    gap: 28px 32px;
}

/* If no image at all, drop the image area and split bullets 50/50. */
.wyl-no-image .wyl-grid,
.wyl-no-image.wyl-layout-image-top .wyl-grid,
.wyl-no-image.wyl-layout-image-bottom .wyl-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
}

/* No vertical offset — the grid's align-items:center keeps the bullet
   columns centred against the image. (The old margin-top:10vh pushed
   them off-centre by a viewport-dependent amount.) */
.wyl-bullets-left  { grid-area: left; }
.wyl-bullets-right { grid-area: right; }
.wyl-image-wrap    { grid-area: image; }

/* ============================================================
   BULLETS
   ============================================================ */
.wyl-bullets {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.wyl-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Reserve equal height per row so the left and right columns line
       up even when one side's text is shorter (e.g. a 1-line vs 2-line
       description). Covers up to a 2-line description; longer copy would
       need the row-grid refactor. Removed on mobile (single column). */
    min-height: 140px;
}

.wyl-bullet-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 40px;
}

/* The left column mirrors the right: its text hugs the centre image so
   both sides sit an equal distance from it, instead of the left text
   drifting to the far edge (which read as "not aligned"). row-reverse
   keeps the marker, when enabled, on the image side. Reset on mobile. */
.wyl-bullets-left .wyl-bullet      { flex-direction: row-reverse; }
.wyl-bullets-left .wyl-bullet-body { text-align: right; }

.wyl-bullet-title {
    display: block;
    font-family: 'Geologica', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #851625;
    line-height: 1.3;
    margin-bottom: 6px;
}

.wyl-bullet-desc {
    font-family: 'Geologica', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: #555;
    margin: 0;
}

/* Rich-text wraps content in <p>; keep paragraph spacing tidy and let
   the marketer's chosen alignment (e.g. justify) show through. */
.wyl-bullet-desc p { margin: 0 0 8px; }
.wyl-bullet-desc p:last-child { margin-bottom: 0; }

/* ============================================================
   MARKER — burgundy filled circle with check (default) or
   sparkle (alternate); .wyl-marker-none hides via :empty.
   ============================================================ */
.wyl-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #851625;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.wyl-marker svg {
    width: 14px;
    height: 14px;
}

/* ============================================================
   IMAGE
   ============================================================ */
.wyl-image-wrap {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 320px;
}

.wyl-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* In image-top / image-bottom layouts the image goes wide. */
.wyl-layout-image-top    .wyl-image-wrap,
.wyl-layout-image-bottom .wyl-image-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — tighter padding, smaller image. */
@media (max-width: 1024px) and (min-width: 769px) {
    .wyl-section     { padding: 24px 32px; }
    .wyl-title       { font-size: 28px; margin-bottom: 24px; }
    .wyl-grid        { gap: 24px; }
    .wyl-image-wrap  { width: 220px; }
    .wyl-layout-image-top    .wyl-image-wrap,
    .wyl-layout-image-bottom .wyl-image-wrap { max-width: 440px; }
}

/* Mobile — every layout collapses to a single column:
   image first, then all 4 bullets stacked. */
@media (max-width: 768px) {
    .wyl-section { padding: 32px 20px; margin: 24px 12px; width: auto; border-radius: 16px; }
    .wyl-chrome-none.wyl-section { padding: 24px 0; margin: 24px 0; width: 100%; border-radius: 0; }
    .wyl-title   { font-size: 22px; margin-bottom: 20px; }

    .wyl-grid,
    .wyl-layout-center       .wyl-grid,
    .wyl-layout-image-top    .wyl-grid,
    .wyl-layout-image-bottom .wyl-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "left"
            "right";
        gap: 18px;
    }

    .wyl-no-image .wyl-grid,
    .wyl-no-image.wyl-layout-image-top    .wyl-grid,
    .wyl-no-image.wyl-layout-image-bottom .wyl-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "right";
    }

    .wyl-image-wrap,
    .wyl-layout-image-top    .wyl-image-wrap,
    .wyl-layout-image-bottom .wyl-image-wrap {
        width: 80%;
        max-width: 320px;
        margin: 0 auto 15px;
    }

    .wyl-bullets { gap: 24px; }
    .wyl-bullets-left,
    .wyl-bullets-right { margin-top: 0; }
    .wyl-bullet-body   { padding-bottom: 18px; text-align: center; }

    /* Center each bullet row on mobile — works whether or not the
       marker is rendered. flex-direction:column stacks marker (if any)
       above the body; align-items + text-align centre everything. */
    .wyl-bullet {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 0; /* single column — no row-alignment to reserve for */
    }
    /* Undo the desktop left-column mirroring (higher specificity) so the
       single mobile column stays centred. */
    .wyl-bullets-left .wyl-bullet      { flex-direction: column; }
    .wyl-bullets-left .wyl-bullet-body { text-align: center; }

    .wyl-marker          { width: 24px; height: 24px; }
    .wyl-marker svg      { width: 12px; height: 12px; }
    .wyl-bullet-title    { font-size: 20px; }
    .wyl-bullet-desc     { font-size: 15px; }
}