/* ==========================================================
   PUBLIC COMPANY PLATFORM -- HOMEPAGE SECTIONS, everything after Hero
   on Home (Company::public.home + home_sections/*). Owns the ordered-
   section-renderer shell (visibility/full-width/inner) and the generic
   .cp-home-section__* primitives (title/lede/link) every section
   template shares. Per-content-type card grids (Locations/Team/Updates)
   are 08_content.css -- they're reused by native full pages too, not
   homepage-only. Layout/alignment variants are 09_layout_alignment.css.
   Custom sections are 10_custom_sections.css.
========================================================== */

/* Homepage section device visibility (company_homepage_sections'
   is_visible_mobile/tablet/desktop) -- one responsive site, not separate
   per-device builds, so a hidden-on-X section still renders server-side
   and is only hidden here, at the same breakpoints this stack already
   uses elsewhere (560px/720px) rather than introducing new ones.
   display: contents by default so this wrapper never enters the box
   model -- its child (a real .cp-home-section) lays out exactly as if
   it were still main's direct child (padding, border-top,
   :first-of-type all keep working); only the display: none override
   below actually removes the whole subtree at that breakpoint. */
.cp-home-section-visibility {
    display: contents;
}

@media (max-width: 560px) {
    .cp-home-section-visibility--hide-mobile { display: none; }
}

@media (min-width: 561px) and (max-width: 720px) {
    .cp-home-section-visibility--hide-tablet { display: none; }
}

@media (min-width: 721px) {
    .cp-home-section-visibility--hide-desktop { display: none; }
}

/* .cp-home-section is the OUTER element -- every section is its own
   card: a white surface against the page's own off-white background
   (--cp-bg vs --cp-surface, body.cp-body/02_reset.css), bordered,
   rounded, separated from its neighbors by real margin instead of a
   shared hairline divider -- reads as a distinct block on its own,
   whether it's stacked flat, sitting in .cp-home-columns__main, or in
   the Side Panel. Only margin-top/bottom (never the shorthand) -- a
   card can also be full-width, whose own margin-left/right (the
   full-bleed breakout below) must never be clobbered regardless of
   which rule the cascade happens to apply last. .cp-home-section__inner
   is what actually holds the section's content (title, cards, ...) and
   is ALWAYS capped at --cp-content-width, full-width or not -- "full
   width" (company_homepage_sections.is_full_width, migration 0475)
   means the section's own card background stretches edge to edge, never
   the content sitting inside it. */
.cp-home-section {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    margin-top: 20px;
}

/* Rounded corners only when NOT also full-width -- a 100vw-wide card's
   corners sit exactly on the browser window's own edges, where a
   border-radius would just clip into an odd notch instead of reading as
   a rounded card. */
.cp-home-section:not(.cp-home-section--full-width) {
    border-radius: var(--cp-radius-lg);
    overflow: hidden;
}

.cp-home-section__inner {
    max-width: var(--cp-content-width);
    margin: 0 auto;
    padding: 10px 20px;
}

/* .cp-shell (this section's parent, via home.php's wrapper div) caps
   everything at --cp-content-width, so reaching full width means
   breaking out of it -- the standard negative-margin full-bleed trick.
   .cp-home-section__inner's own max-width/margin above (the same
   --cp-content-width) is what keeps content centered at the normal
   width regardless -- this rule only ever affects the outer element. */
.cp-home-section--full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cp-home-section--cta {
    text-align: center;
}

/* A section with its own background_color (custom sections only, see
   company_homepage_sections.background_color) overrides the card's
   default white surface via that same element's own inline style --
   nothing extra needed here now that every section is already a
   margin-separated, rounded card by default. */

/* A "feed" section renders its OWN items as individually-carded posts
   (see .cp-post, 08_content.css) instead of the section itself being one
   shared card -- Latest Updates is the first of these (each post needs
   its own engagement card: reactions/comments, exactly like a Stream
   post, not a shared preview panel). Undoes only the card chrome above;
   full-bleed/title/spacing rules are untouched, and win regardless of
   load order since they're later in the cascade at equal specificity. */
.cp-home-section--feed {
    background: transparent;
    border: none;
}

.cp-home-section--feed,
.cp-home-section--feed:not(.cp-home-section--full-width) {
    border-radius: 0;
    overflow: visible;
}

/* The feed's own .cp-home-section is transparent/borderless (above) --
   each individual .cp-post is its OWN visible card instead, unlike every
   other section (About/Locations/Team/Custom), which is ONE shared
   bordered card wrapping all of its content. That's why
   .cp-home-section__inner's padding (sized to sit a bordered card's
   *interior* in from its own edge) can't apply here the normal way: it
   insets each post's real, visible border by 20px on every side, so a
   post reads narrower than another section's own outer card even though
   both .cp-home-section boxes are the same width -- the post's visible
   edge and the invisible feed section's edge are two different things,
   and only the invisible one lined up. Dropping all inner padding (not
   just top/bottom, see the post-to-post gap note below) makes each post
   render at the section's own full width instead, so its real visible
   edge is what lines up with another section's own visible card edge.
   Removing top/bottom here also fixed a second, previously patched-around
   issue: .cp-post used to carry its own margin-top:-10px to counteract
   this same padding, which silently ate into .cp-post-feed's own 16px
   gap (making every post-to-post gap 6px, not 16px) -- gone now that
   there's no padding left to counteract. */
.cp-home-section--feed .cp-home-section__inner {
    padding: 0;
}

.cp-home-section__title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 800;
    color: var(--cp-heading);
}

.cp-home-section__lede {
    margin: 0 0 14px;
    font-size: 15.5px;
    color: var(--cp-text);
}

/* Real-overflow clamp + inline "more"/"less", replacing the old hard
   280-char server truncation + "Learn more" link to a dedicated About
   page (both Company's own About and Locations pages are now something
   the company can disable from Website settings, so a homepage card can
   no longer assume either page exists to link to). Same measure-then-
   binary-search approach as post excerpts/location lines (site.js's
   fitInlineAboutToggle()) -- lifted entirely when the full description
   already fits, never shows "more" with nothing further to reveal. 6
   lines here (vs. Locations' 2) since About's own text is real prose,
   not a short address line -- panel override below tightens it back
   down for the narrower column. */
.cp-home-section__lede--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cp-home-section__lede-toggle {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cp-primary, #137A5A);
    cursor: pointer;
    font-size: inherit;
    font-weight: 700;
}

.cp-home-section__lede-toggle:hover { text-decoration: underline; }

.cp-home-section__link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cp-primary, #137A5A);
    text-decoration: none;
    margin-top: 4px;
}

.cp-home-section__link:hover { text-decoration: underline; }

.cp-home-section__link--button {
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    padding: 10px 24px;
    border-radius: var(--cp-radius-pill);
    margin-top: 10px;
}

.cp-home-section__link--button:hover { text-decoration: none; opacity: .92; }

/* About's own optional decorative image (company_homepage_sections.
   about_image_path) -- always the last thing in the card when set,
   below the "Learn more" link. Just an <img>, not a background/card of
   its own -- the source image is already a finished graphic (see
   CompanyHomepageSectionImageProcessor's own recommended ~400x100px
   guide), not a photo needing a frame. */
.cp-home-section__about-image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    border-radius: var(--cp-radius-sm);
}

/* ==========================================================
   SIDE PANEL (migration 0481) -- an optional two-column split for
   everything between Hero and the footer: a main stack plus a narrow
   side column, toggled/positioned/sized from the Homepage tab's own
   Side Panel row (CompanyHomepageSectionRepository::
   findSidePanelSettings()). Hero stays full-bleed above this
   unconditionally (it never uses .cp-home-section at all); the footer
   stays full-width below it. Full width is never active on a section
   while the panel is on (CompanyPublicProfileController::show() forces
   is_full_width off for every section in that case), so
   .cp-home-section--full-width's breakout never has to be reconciled
   with a column layout here.
========================================================== */

.cp-home-columns {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* Default flex order is [main, panel] (position=right); reversing the
   row, not swapping which div is which, keeps the DOM/source order
   (main content before the panel) the same regardless of which side
   it's drawn on -- screen readers and tab order stay unaffected by a
   purely visual choice. */
.cp-home-columns--panel-left {
    flex-direction: row-reverse;
}

.cp-home-columns__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* No padding/margin of its own -- deliberately. Every section already
   carries its own .cp-home-section__inner padding below; adding more
   here would just double it up. */
.cp-home-columns__panel {
    flex: 0 0 var(--cp-panel-width);
    max-width: var(--cp-panel-width);
    min-width: 0;
}

/* Sticky within the row, not the panel column itself -- .cp-home-columns'
   own align-items:stretch (above) makes .cp-home-columns__panel as tall
   as its main-column sibling, giving this inner wrapper room to actually
   float/stick within that height instead of being pinned the instant its
   own (usually much shorter) content ends. top clears the site's own
   sticky header (.cp-site-header, 05_header.css: 64px min-height + 1px
   border) plus a 12px gap so the panel never touches the header while
   scrolled. */
.cp-home-columns__panel-inner {
    position: sticky;
    top: 77px;
    margin-top: 20px;
}

/* Outside this layout, .cp-home-section__inner always re-caps itself at
   the full page content width (--cp-content-width) and centers itself
   -- correct for a lone full-width section, wrong here, where the
   column's own flex-basis (not the page width) is the real available
   width. Padding is untouched -- only max-width/margin are a page-width
   concern. */
.cp-home-columns__main .cp-home-section__inner,
.cp-home-columns__panel .cp-home-section__inner {
    max-width: none;
    margin: 0;
}

/* About's clamp is 6 lines everywhere by default (above) -- too tall for
   the panel's own narrow column, where each line wraps much sooner and
   6 lines of wrapped text would dwarf the rest of the panel's cards. */
.cp-home-columns__panel .cp-home-section__lede--clamp {
    -webkit-line-clamp: 3;
}

@media (max-width: 720px) {
    .cp-home-columns,
    .cp-home-columns--panel-left {
        flex-direction: column;
    }

    .cp-home-columns__panel {
        flex-basis: auto;
        max-width: none;
    }

    .cp-home-columns__panel-inner {
        position: static;
    }
}

/* Panel sections (About/Locations, etc.) as tabs -- home.php only wraps
   them this way when there are 2+ (a single one renders as a plain
   section, no tab chrome). Base rules here are the DESKTOP/TABLET case:
   the strip stays hidden and every panel shows at once, in source order
   -- pixel-identical to the already-approved stacked-card look, since
   .cp-panel-tabs itself carries no visual styling of its own outside the
   ≤560px block below. Mobile-only presentation lives entirely in that
   block -- this markup never changes shape between widths, only how
   it's shown. */
.cp-panel-tabs__strip {
    display: none;
}

.cp-panel-tabs__panel {
    display: block;
}

/* MOBILE BREAKPOINT (≤560px) -- panel content (Side Panel Hero/About/
   Locations) reads BEFORE main-column content (Latest Updates/Team) on
   mobile specifically. The ≤720px tablet stacking above stays exactly as
   already approved (main first, in DOM order, untouched) -- this only
   layers a visual reorder on top of it for the narrower mobile range,
   never touching markup: .cp-home-columns__main/__panel are always
   siblings in that DOM order regardless of $panelPosition
   (CompanyPublicProfileController::show()), so flipping `order` here is
   the only change needed, no template/controller change at all. */
@media (max-width: 560px) {
    .cp-home-columns__main {
        order: 2;
    }

    .cp-home-columns__panel {
        order: 1;
    }

    /* .cp-home-columns__panel-inner's own margin-top:20px (base rule,
       above) exists to align the panel's first card with the main
       column's first card at desktop/tablet -- moot once the panel
       reorders to the top of the page on mobile (above), and it's what
       was actually keeping the header and the panel's own first card
       (.cp-panel-hero, its own margin-top already zeroed in
       11_panel_hero.css) apart, not that card's own margin. */
    .cp-home-columns__panel-inner {
        margin-top: 0;
    }

    /* True edge-to-edge -- a rounded corner sitting flush against the
       physical screen edge (once .cp-shell--home's own side padding is
       gone, 03_shell.css) reads as a mistake, not a design choice. Border
       stays -- a flush hairline at the screen edge is a normal, common
       mobile pattern, unlike a half-clipped-looking rounded corner. */
    .cp-home-section:not(.cp-home-section--full-width) {
        border-radius: 0;
    }

    /* One continuous card: Side Panel Hero (11_panel_hero.css) on top,
       this tab strip + the active tab's content directly underneath, no
       gap and no doubled card chrome between them. .cp-panel-hero keeps
       its own full border/background; this wrapper's border-top:none is
       what makes the seam between the two read as one card instead of
       two stacked ones. */
    .cp-panel-tabs {
        margin-top: 0;
        background: var(--cp-surface);
        border: 1px solid var(--cp-border);
        border-top: none;
    }

    /* The section(s) rendered inside a tab panel are still real
       .cp-home-section cards (renderHomeSection() doesn't know it's
       being used this way) -- stripped of their own card chrome here so
       there's a single shared border/background (.cp-panel-tabs' own,
       above) instead of a card-inside-a-card look. */
    .cp-panel-tabs .cp-home-section {
        margin-top: 0;
        border: none;
        background: none;
    }

    .cp-panel-tabs__strip {
        display: flex;
        border-bottom: 1px solid var(--cp-border);
    }

    .cp-panel-tabs__tab {
        flex: 1 1 0;
        padding: 12px 8px;
        background: none;
        border: none;
        font-size: 13px;
        font-weight: 700;
        color: var(--cp-text-muted);
        cursor: pointer;
    }

    .cp-panel-tabs__tab.is-active {
        color: var(--cp-primary, #137A5A);
        box-shadow: inset 0 -2px 0 var(--cp-primary, #137A5A);
    }

    .cp-panel-tabs__panel {
        display: none;
    }

    .cp-panel-tabs__panel.is-active {
        display: block;
    }

    /* Flush under the (now slimmer, 05_header.css) header -- a single
       panel section (rendered directly, no .cp-panel-tabs wrapper) can
       be the first thing on the page whenever the panel reorders ahead
       of main content (above). .cp-panel-hero's own equivalent override
       lives in 11_panel_hero.css, the file that actually owns that
       class -- not here, where it would lose the cascade to that file's
       own margin-top:20px (11_panel_hero.css loads after this file, so
       equal-specificity rules there always win over a copy placed here). */
    .cp-home-columns__panel > .cp-home-section-visibility:first-child .cp-home-section {
        margin-top: 0;
    }
}