/**
 * Flamingo Marine — Two-up Comparison (V4 strip-2, lower half).
 *
 * Two static panels: "The Details We Refused to Ignore" + "The Curiosity that
 * Built the Boat". Each is a bold IBM Plex Sans title over a short paragraph.
 * These were previously click-to-expand accordions; the toggles were removed so
 * the copy is always visible (BugHerd #9).
 */

.flm-two-up {
    background-color: var(--wp--preset--color--surface-deep);
    color: var(--wp--preset--color--text-primary);
}

/* --- V4 two-line headline (above the MEET THE ROVE button) -------------- */
.flm-two-up .flm-two-up__headline {
    margin: 0;
    font-family: var(--wp--preset--font-family--plex);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--text-primary);
}

/* Second line — same weight/size, muted gray. */
.flm-two-up .flm-two-up__headline .flm-two-up__headline-muted {
    color: var(--wp--preset--color--text-muted);
}

/* Sit the button a touch below the headline. */
.flm-two-up .meet-the-rove-cta {
    margin-top: var(--wp--preset--spacing--md);
}

/* MEET THE ROVE CTA + separator already styled by the global button rules;
   here we only ensure breathing room before the panels. */
/* Specificity note: core ships `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)`
   (0,3,0) which forces a 100px centered line. The extra :not()s below take this
   selector to (0,4,0) so the full-width override actually wins (BugHerd #10). */
.flm-two-up .wp-block-separator:not(.is-style-dots):not(.is-style-wide) {
    margin-block: var(--wp--preset--spacing--xl);
    border-color: var(--wp--preset--color--surface-elev-1);
    opacity: 1;
    /* Full-width divider above BOTH panels — the WP default is a short centered
       line that sits over the column boundary and reads as a spacer above the
       right column only (BugHerd #10). */
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.flm-two-up__panels {
    gap: var(--wp--preset--spacing--xxl);
    margin-top: var(--wp--preset--spacing--xl);
}

/* --- Static panels: title + copy (no accordion — BugHerd #9) ------------ */

.flm-two-up__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--plex, inherit);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--heading-five, 1.0625rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--wp--preset--color--text-primary);
}

.flm-two-up__text {
    margin: var(--wp--preset--spacing--sm) 0 0;
    color: var(--wp--preset--color--text-secondary);
    font-weight: 400;
    line-height: 1.5;
    max-width: 44ch;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
    /* Force the two wp:columns to stack (core stacks at <=781px; pin it here so
       the layout matches the rest of the page's 767px mobile breakpoint). */
    .flm-two-up__panels {
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--lg);
    }
    .flm-two-up__panels > .wp-block-column {
        flex-basis: 100% !important;
    }
    .flm-two-up__panel + .flm-two-up__panel {
        margin-top: var(--wp--preset--spacing--md);
    }
}

/* Mobile: clamp the panel copy to two lines (client chose "as a two line" on
   BugHerd g30637662 — the full paragraphs read as too dense on phones). */
@media (max-width: 767px) {
	.flm-two-up__text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}