/* =========================================================
   Headings — square accent bullet on guide section h2,
   plus an accent-tick on guide-block h3 only (not the
   rule-card grid)
   ========================================================= */

.guide-article .section-head h2 {
    display: flex;
    align-items: center;
    gap: 14px;
}

.guide-article .section-head h2::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
}

.guide-block__content h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-block__content h3::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 18px;
    height: 2px;
    background: var(--color-accent);
}

@media (max-width: 768px) {
    .guide-article .section-head h2 {
        gap: 10px;
    }
}

img {
    border-radius: 8px;
}

img#twelve_v_connector {
    object-position: 50% 10%;
}

img#wireview {
    object-position: 50% 40%;
}

/* =========================================================
   Article — consistent vertical rhythm between blocks
   ========================================================= */

.guide-article {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* .section-head is a global element with its own margin-bottom; inside the
   gapped flex column that would double-space, so let the gap own the rhythm. */
.guide-article > .section-head {
    margin-bottom: 0;
}


/* =========================================================
   Media grid — side-by-side images with captions
   ========================================================= */

.guide-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.guide-media-grid figure {
    margin: 0;
    min-width: 0;
}

.guide-media-grid img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .guide-media-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FULL-WIDTH TEXT
   ========================================================= */

.guide-block--text {
    width: 100%;
}

.guide-block--text .guide-block__content {
    width: 100%;
    max-width: 800px;
}


/* =========================================================
   FULL-WIDTH IMAGE
   ========================================================= */

.guide-block--image {
    width: 100%;
}

.guide-block--image img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   SPLIT LAYOUT
   ========================================================= */

.guide-block--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: stretch;
    gap: 3em;
}


/* =========================================================
   IMAGE RIGHT
   ========================================================= */

.guide-block--image-right {
    grid-template-areas: "content media";
}


/* =========================================================
   IMAGE LEFT
   ========================================================= */

.guide-block--image-left {
    grid-template-areas: "media content";
}


/* =========================================================
   SPLIT CONTENT
   ========================================================= */

.guide-block--split .guide-block__content {
    grid-area: content;

    display: flex;
    flex-direction: column;
    justify-content: center;
    /*gap: 1.25rem;*/

    width: 100%;
    /*padding: 3rem;*/
}


/* =========================================================
   SPLIT IMAGE
   ========================================================= */

.guide-block--split .guide-block__media {
    grid-area: media;

    position: relative;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
}

.guide-block--split .guide-block__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* =========================================================
   MEDIA LEGEND — text overlay pinned to the bottom of a media image
   Opt-in: add <div class="guide-block__legend"> inside .guide-block__media
   ========================================================= */
.guide-block__legend {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    padding: 1rem 1.25rem;

    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.4;

    background: rgba(17, 19, 24, 0.90);

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* =========================================================
   RULES GRID — 2x2 card grid for key rules
   ========================================================= */

.guide-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.guide-rule-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    padding: 28px 32px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.guide-rule-card__title {
    margin: 0;

    font-size: clamp(18px, 2vw, 21px);
    font-weight: 600;
    line-height: 1.2;
}

.guide-rule-card__text {
    margin: 0;

    color: var(--color-text-muted);
    line-height: 1.6;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .guide-article {
        gap: 2rem;
    }


    /* -----------------------------------------
       Split becomes stacked
       ----------------------------------------- */

    .guide-block--split {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "content";
    }


    /* -----------------------------------------
       Image
       ----------------------------------------- */

    .guide-block--split .guide-block__media {
        min-height: 300px;
    }


    /* -----------------------------------------
       Content
       ----------------------------------------- */

    /* Mobile: the split stacks (media on top, content below), so keep the top
       padding to separate the text from the image — but drop the bottom. This
       content is always the last block in a guide section, so a bottom padding
       would stack on the section's own padding and push the separator line
       further below the content than it sits above the next section's. The
       section padding (app.css) is the single source of that gap. Desktop is
       side-by-side and never set this, so it is unaffected. */
    .guide-block--split .guide-block__content {
        padding: 2rem 0 0;
    }

    /* The content's final <p>/callout also carries a 1em bottom margin (reset /
       .callout) that would leak below the content box on top of the section
       padding. Zero it so the gap below the line matches the (margin-free) gap
       above it, set solely by the section padding before the next .section-head. */
    .guide-block__content > :last-child {
        margin-bottom: 0;
    }


    /* -----------------------------------------
       Rules grid becomes single column
       ----------------------------------------- */

    .guide-rule-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .guide-rule-card {
        padding: 24px;
    }
}