/**
 * TGL Blog Builder — component styles.
 *
 * Scoped entirely to `.tgl-blog-*` classes emitted by the compiler's custom
 * components. Prose (core Gutenberg blocks: headings, paragraphs, lists) is left
 * to the theme's typography on purpose — EXCEPT the blog body's own section
 * headings, which get a little more size/weight/air via `.tgl-blog-post h2[id]`
 * (a scope added by BlogAssets on singular blog posts + by the admin preview).
 *
 * Colors come from the design-system tokens (--tgl-teal #31b8c6, --tgl-orange
 * #F28f52) with hard fallbacks, so the blog matches the rest of the site instead
 * of inventing its own palette. Teal = structure/brand, orange = links/accents.
 * Mobile-first (80% of traffic); grids collapse to one column.
 */

.tgl-blog-takeaways,
.tgl-blog-features,
.tgl-blog-cardgrid,
.tgl-blog-faq,
.tgl-blog-brand-cta,
.tgl-blog-cta-closing,
.tgl-blog-imagebreak,
.tgl-blog-figure {
    --tgl-blog-teal: var(--tgl-teal, #31b8c6);
    --tgl-blog-teal-dark: var(--tgl-teal-dark, #1fa3a3);
    --tgl-blog-teal-bg: var(--tgl-teal-light, #e8f8f8);
    --tgl-blog-teal-border: #b7e6ec;
    --tgl-blog-orange: var(--tgl-orange, #F28f52);
    --tgl-blog-orange-dark: var(--tgl-orange-dark, #d5702a);
    --tgl-blog-ink: var(--tgl-text-primary, #222);
    --tgl-blog-muted: var(--tgl-text-secondary, #666);
    --tgl-blog-border: var(--tgl-border-light, #eee);
    margin: 2.75rem 0;
}

/* Blog body section headings — a touch bigger/heavier than the theme default,
   with more top margin so sections breathe. Scoped to anchored headings only
   (section h2 / subsection h3), so sidebar/chrome headings are untouched. */
.tgl-blog-post h2[id] {
    font-size: clamp(1.6rem, 1rem + 2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    margin-top: 3rem;
    margin-bottom: .85rem;
}

.tgl-blog-post h3[id] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: .5rem;
}

/* Key takeaways — the featured-snippet summary box. */
.tgl-blog-takeaways {
    background: var(--tgl-blog-teal-bg);
    border: 1px solid var(--tgl-blog-teal-border);
    border-left: 4px solid var(--tgl-blog-teal);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.tgl-blog-takeaways__label {
    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tgl-blog-teal-dark);
}

.tgl-blog-takeaways ul {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.7;
    color: var(--tgl-blog-ink);
}

/* Feature list — bold lead-in items with an orange accent dot. */
.tgl-blog-features ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.tgl-blog-features li {
    position: relative;
    padding: .85rem 1rem .85rem 2.4rem;
    background: #fff;
    border: 1px solid var(--tgl-blog-border);
    border-radius: 10px;
    line-height: 1.6;
}

.tgl-blog-features li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--tgl-blog-orange);
}

/* Card grid — responsive auto-fit. The site's main column is ~730px (1280 body
   − 500 sidebar − gap), where two columns of content-dense cards would sit at a
   cramped ~350px each. So this lays out as ONE roomy column at that width (each
   card gets the full column) and only splits into 2–3 columns when there is
   genuinely room, e.g. a full-width layout. min(100%, …) keeps the track from
   overflowing on phones. No media query needed — the grid sizes to its container. */
.tgl-blog-cardgrid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 1.75rem;
    margin-top: 1.25rem;
}

.tgl-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tgl-blog-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.tgl-blog-card__media {
    margin: 0;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    background: var(--tgl-blog-teal-bg);
}

.tgl-blog-card__media img,
.tgl-blog-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

/* Card headings carry an id but are NOT body subsections — keep them compact
   (this wins over the .tgl-blog-post h3[id] body sizing via source order). */
.tgl-blog-post .tgl-blog-card h3 {
    margin: 1.4rem 1.5rem .6rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tgl-blog-ink);
}

.tgl-blog-card ul {
    margin: 0 1.5rem 1.5rem;
    padding-left: 1.15rem;
    font-size: .97rem;
    line-height: 1.75;
    color: var(--tgl-blog-muted);
}

.tgl-blog-card li + li {
    margin-top: .35rem;
}

.tgl-blog-card p {
    margin: .9rem 1.5rem 1.5rem;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--tgl-blog-muted);
}

/* ==========================================================================
   FAQ — native <details> disclosure, restyled from Figma `FAQ` (157:2158),
   read in Dev Mode on 2026-09-09.

   This block renders in two very different places: as a full-width section on
   the Home, and inside a blog post's prose column. So the breakpoint is a
   CONTAINER query, not a media query — on a 1440px desktop the same markup is
   1144px wide on the Home and ~700px wide inside a post, and a media query
   would give both the wide layout. It has to answer to the width it was given.

   Below the query it is a plain stacked list, which is also the mobile layout
   (80% of traffic) and the safe fallback anywhere container queries are not
   supported: narrow is the default, wide is the enhancement.

   LEGACY MARKUP: posts compiled before 2026-09-09 have their HTML stored in the
   database WITHOUT the __inner/__intro/__items wrappers, and they are not
   recompiled until someone edits them. Nothing below REQUIRES those wrappers —
   every item rule is a descendant selector, so old posts get the new type and
   rules and simply skip the two-column layout.

   DIVERGENCE FROM THE FILE — the container. Every measurement inside this
   section is internally consistent (360 + 80 gap + 920 = 1360, node 157:2159),
   but 1360 is not the container the rest of the page uses: `Islands`, `Homes`
   and `Testimonials` agree on 1144 three independent ways. The file also places
   this section off-centre (288px of gutter on the left, 272 on the right), which
   is the fingerprint of a frame resized without re-centring, not a decision.
   A section 216px wider than its neighbours would break the vertical alignment
   of the whole page, so it uses the shared container and keeps the intro column
   at its designed 360px — that width is what wraps the heading onto its four
   designed lines. The accordion column absorbs the difference.
   ========================================================================== */

.tgl-blog-faq {
    container-type: inline-size;
    container-name: tgl-faq;
}

/* The wrapper owns the spacing when it exists, so the section band can sit flush
   against its neighbours on the Home. Legacy markup has no wrapper and keeps the
   shared 2.75rem rhythm from the group at the top of this file. */
.tgl-blog-faq:has(> .tgl-blog-faq__inner) {
    margin: 0;
}

.tgl-blog-faq__inner {
    margin-block: 2.75rem;
    /* The gutter lives in the base state, not only in the wide one: on the Home
       this section is full-bleed, and without it the questions run into both
       screen edges on a phone — 80% of the traffic. The same max() that centres
       the 1144 container on a wide page falls back to the gutter on a narrow
       one, so it is one formula for both. */
    padding-inline: max(1.25rem, (100% - var(--tgl-container, 71.5rem)) / 2);
}

.tgl-blog-faq__intro > :first-child {
    margin-top: 0;
}

/* Stacked, the intro and the accordion are two blocks in normal flow with only
   the lead's own paragraph margin between them, which is not enough to read as
   a boundary. Two columns do not need it — there the gap is horizontal. */
.tgl-blog-faq__intro {
    margin-bottom: 2rem;
}

.tgl-blog-faq h2 {
    font-family: var(--tgl-font-heading, Georgia, serif);
    /* 400, not a bolder cut: the 56px heading in the file is Raleway Regular
       (157:2164). At that size the weight is carried by the size. */
    font-weight: 400;
    letter-spacing: var(--tgl-tracking-display, -0.012em);  /* -0.672/56 */
    color: var(--tgl-faq-ink, #1b1d1c);
    /* 32 stacked, the same step `Testimonials` takes for its own heading. 56 on
       a 375px screen is four words per line. Inside a blog post this loses to
       `.tgl-blog-post h2[id]` on specificity, which is correct: there the post's
       own heading scale should win. */
    font-size: 2rem;
    line-height: var(--tgl-leading-heading, 1.12);
    margin: 0 0 1rem;
}

.tgl-blog-faq__lead {
    font-size: var(--tgl-text-body-sm, .86875rem);          /* 13.9 — 157:2166 */
    line-height: var(--tgl-leading-body, 1.67);             /* 23.25/13.9 */
    color: var(--tgl-body-color, #3a3d38);
}

/* Hidden while stacked, on purpose. The mobile design drops this link entirely,
   and stacked it lands flush against the first question with nothing to
   separate the two — it reads as a broken row rather than as a link. Nothing is
   lost: on a phone the contact form is the next section down, which is where
   the link was sending people anyway. */
.tgl-blog-faq__link {
    display: none;
    align-items: center;
    gap: .375rem;                                            /* 6 — 157:2167 */
    padding-bottom: .1875rem;
    border-bottom: 1px solid currentColor;
    font-size: var(--tgl-text-link, .875rem);                /* 14 — 157:2168 */
    line-height: var(--tgl-leading-ui, 1.55);                /* 21.7/14 */
    letter-spacing: var(--tgl-tracking-link, .01em);         /* 0.14/14 */
    color: var(--tgl-faq-ink, #1b1d1c);
    text-decoration: none;
}

.tgl-blog-faq__link svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform .2s ease;
}

.tgl-blog-faq__link:hover svg,
.tgl-blog-faq__link:focus-visible svg {
    transform: translateX(3px);
}

/* ── The accordion ─────────────────────────────────────────────────────────
   Hairlines instead of boxes: the file draws one rule above the first item and
   one under each (157:2171 and each HorizontalBorder), in warm sand — not the
   cool translucent grey the rest of the page uses for dividers. */

.tgl-blog-faq__items {
    border-top: 1px solid var(--tgl-faq-rule, #c9bfa8);
}

.tgl-blog-faq__item {
    border-bottom: 1px solid var(--tgl-faq-rule, #c9bfa8);
    background: none;
}

.tgl-blog-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* 26 top and bottom over a 27px line is the 80px row of 157:2173. */
    padding: 1.625rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem;
    line-height: 1.39;                                       /* 26.4/19 */
    font-weight: 400;
    color: var(--tgl-faq-ink, #1b1d1c);
}

.tgl-blog-faq__item summary::-webkit-details-marker {
    display: none;
}

/* The marker is a 28px ring with a "+" in it (157:2176). Open, the file rotates
   the WHOLE ring 45deg and fills it — the bounding box goes to 39.598, which is
   28 × √2, so it is a rotation and not a second icon. The + becomes an × for
   free, which is why there is no separate close glyph anywhere in the file. */
.tgl-blog-faq__item summary::after {
    content: "+";
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box explicitly: this stylesheet does not set a global one, and the
       file draws the stroke INSIDE the 28x28 frame (157:2176). Without it the
       ring renders 30px and the closed row measures 83 instead of the 81 the
       file specifies — measured, not assumed. */
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tgl-faq-marker-border, #b5a88a);
    border-radius: 50%;
    /* The file sets Inter here and nowhere else in the design. Same call as the
       JetBrains Mono eyebrow: a fourth family for one glyph is explore drift,
       so it uses the UI family. */
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    font-size: 1rem;                                         /* 16 — 157:2177 */
    line-height: 1.2;                                        /* 19.2/16 */
    color: var(--tgl-faq-ink, #1b1d1c);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.tgl-blog-faq__item[open] summary::after {
    content: "+";
    transform: rotate(45deg);
    background: var(--tgl-faq-ink, #1b1d1c);
    border-color: var(--tgl-faq-ink, #1b1d1c);
    color: var(--tgl-faq-marker-on-ink, #f3efe7);
}

.tgl-blog-faq__answer {
    padding: 0 0 1.75rem;                                    /* 28 — 157:2197 */
    /* 34.5rem = 551.7 (157:2197). Kept as an absolute measure rather than a
       share of the column: it is ~75 characters, which is the reason it exists. */
    max-width: 34.5rem;
    font-size: .90625rem;                                    /* 14.5 — 157:2198 */
    line-height: 1.76;                                       /* 25.58/14.5 */
    color: var(--tgl-body-color, #3a3d38);
}

.tgl-blog-faq__answer > :first-child { margin-top: 0; }
.tgl-blog-faq__answer > :last-child { margin-bottom: 0; }

/* ── Wide: the section band and the two columns ────────────────────────────
   900 and not 1144: the split needs the intro column at 360 plus a readable
   accordion, and it reads well from ~900 up. Below that they stack. */

@container tgl-faq (min-width: 900px) {

    .tgl-blog-faq__inner {
        display: grid;
        /* 360 fixed + 80 gap (157:2160 to 157:2171). The intro column keeps its
           designed width; the accordion takes what is left. */
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 5rem;
        align-items: start;
        margin-block: 0;
        /* Full-bleed band, 1144 of content, without a second wrapper: the
           padding centres the content itself. In a prose column the subtraction
           goes negative and max() falls back to the gutter. */
        padding-block: 7.5rem;                               /* 120 — 157:2158 */
        padding-inline: max(var(--tgl-gutter, 3rem), (100% - var(--tgl-container, 71.5rem)) / 2);
        background: var(--tgl-section-bg, #f8f9fb);
        border-top: 1px solid var(--tgl-faq-rule, #c9bfa8);
    }

    .tgl-blog-faq h2 {
        font-size: var(--tgl-text-h2-lg, 3.5rem);            /* 56 — 157:2164 */
        line-height: var(--tgl-leading-tight, 1.05);         /* 58.8/56 */
        margin: 0 0 1.5rem;                                  /* 24 — 157:2160 */
    }

    .tgl-blog-faq__lead {
        margin: 0 0 1.5rem;
    }

    /* Back in the layout the file actually draws it in (157:2167). */
    .tgl-blog-faq__link {
        display: inline-flex;
    }

    .tgl-blog-faq__intro {
        margin-bottom: 0;
    }

    .tgl-blog-faq__item summary {
        font-size: 1.1875rem;                                /* 19 — 157:2175 */
    }
}

/* Brand CTA — "why book with us". Teal block, white text. */
.tgl-blog-brand-cta {
    background: var(--tgl-blog-teal);
    color: #fff;
    border-radius: 14px;
    padding: 1.75rem 1.85rem;
}

.tgl-blog-brand-cta h2 {
    margin: 0 0 .75rem;
    color: #fff;
}

.tgl-blog-brand-cta p {
    margin: 0 0 .75rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

.tgl-blog-brand-cta p:last-child {
    margin-bottom: 0;
}

.tgl-blog-brand-cta a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Closing CTA — orange action link. */
.tgl-blog-cta-closing {
    border-top: 2px solid var(--tgl-blog-teal-border);
    padding-top: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.tgl-blog-cta-closing a {
    color: var(--tgl-blog-orange-dark);
    font-weight: 600;
}

.tgl-blog-cta-closing a:hover {
    color: var(--tgl-blog-orange);
}

/* Standalone image break / section figure. */
.tgl-blog-imagebreak img,
.tgl-blog-figure img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Admin preview only: image slots have no chosen image yet, so show a labelled
   placeholder where the picture will go (injected by the Blog Builder preview). */
.tgl-blog-preview-imgslot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 120px;
    margin: 1rem 0;
    padding: 1rem;
    border: 2px dashed var(--tgl-blog-teal, #31b8c6);
    border-radius: 12px;
    background: var(--tgl-blog-teal-bg, #e8f8f8);
    color: var(--tgl-blog-teal-dark, #1fa3a3);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
}