/* ==========================================================
   PUBLIC COMPANY PLATFORM -- HOMEPAGE SECTION LAYOUT + ALIGNMENT
   (company_homepage_sections.layout/alignment, migration 0472) --
   every section with a card collection: Locations/Our Team, and every
   custom section (CompanyHomepageSectionRepository::listForCompany()'s
   supportsLayout). Latest Updates used to be a fourth (.cp-updates-list/
   .cp-update-card) but no longer supports Layout/Alignment now that it
   renders a stream-style feed of individually-carded, full-width posts
   (see HomepageSectionRenderer::renderLatestUpdates()'s own docblock) --
   nothing left here for grid/carousel/blocks or left/center/right to
   arrange. Targeted generically off the section's own --layout-* /
   --align-* modifier class so the remaining three differently-named item
   containers (.cp-locations-grid/.cp-team-grid/.cp-custom-cards, defined
   in 08_content.css and 10_custom_sections.css) never needed a class
   rename. Loads after both of those files -- these compound selectors
   are already higher-specificity than either file's own base rules
   regardless of load order, but the dependency reads clearer with this
   file loading last.
========================================================== */

/* Carousel: the grid becomes a horizontal, scroll-snapping row -- same
   cards, same data, just a different arrangement of the same markup. */
.cp-home-section--layout-carousel .cp-locations-grid,
.cp-home-section--layout-carousel .cp-team-grid,
.cp-home-section--layout-carousel .cp-custom-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: transparent transparent; /* Firefox -- hidden until :hover below */
}

/* Invisible by default, a thin/light thumb only while the row is
   actually being interacted with (:hover covers mouse; touch devices
   already fade their own native scroll indicator out on their own) --
   never the browser's default thick, opaque, always-on bar. */
.cp-home-section--layout-carousel .cp-locations-grid::-webkit-scrollbar,
.cp-home-section--layout-carousel .cp-team-grid::-webkit-scrollbar,
.cp-home-section--layout-carousel .cp-custom-cards::-webkit-scrollbar {
    height: 6px;
}

.cp-home-section--layout-carousel .cp-locations-grid::-webkit-scrollbar-track,
.cp-home-section--layout-carousel .cp-team-grid::-webkit-scrollbar-track,
.cp-home-section--layout-carousel .cp-custom-cards::-webkit-scrollbar-track {
    background: transparent;
}

.cp-home-section--layout-carousel .cp-locations-grid::-webkit-scrollbar-thumb,
.cp-home-section--layout-carousel .cp-team-grid::-webkit-scrollbar-thumb,
.cp-home-section--layout-carousel .cp-custom-cards::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--cp-radius-pill);
}

.cp-home-section--layout-carousel .cp-locations-grid:hover,
.cp-home-section--layout-carousel .cp-team-grid:hover,
.cp-home-section--layout-carousel .cp-custom-cards:hover {
    scrollbar-color: rgba(16, 21, 29, .18) transparent; /* Firefox */
}

.cp-home-section--layout-carousel .cp-locations-grid:hover::-webkit-scrollbar-thumb,
.cp-home-section--layout-carousel .cp-team-grid:hover::-webkit-scrollbar-thumb,
.cp-home-section--layout-carousel .cp-custom-cards:hover::-webkit-scrollbar-thumb {
    background: rgba(16, 21, 29, .18);
}

/* flex-basis matches each type's own Grid minimum (.cp-locations-grid/
   .cp-team-grid/.cp-custom-cards' own minmax() floor in 08_content.css/
   10_custom_sections.css) -- a carousel card was previously fixed at a
   single 220px for all three types regardless of that floor (wrong for
   Team's 160px and Custom's 240px), and never grew past it either, so a
   row of 2-3 cards on a wide screen clustered on the left with dead
   space to the right instead of filling the row the way Grid's own 1fr
   does. flex-grow:1 fixes both: cards stretch to fill leftover row
   width when there's room (matching Grid's rendered width on the same
   screen), while flex-shrink:0 keeps the floor once there isn't enough
   room for every card at that width, so the row still becomes
   scrollable instead of squeezing cards down like Grid's 1fr would. */
.cp-home-section--layout-carousel .cp-location-card {
    flex: 1 0 220px;
    scroll-snap-align: start;
}

.cp-home-section--layout-carousel .cp-team-card {
    flex: 1 0 160px;
    scroll-snap-align: start;
}

.cp-home-section--layout-carousel .cp-custom-card {
    flex: 1 0 240px;
    scroll-snap-align: start;
}

/* Blocks: one full-width item per row instead of a multi-column grid. */
.cp-home-section--layout-blocks .cp-locations-grid,
.cp-home-section--layout-blocks .cp-team-grid,
.cp-home-section--layout-blocks .cp-custom-cards {
    display: flex;
    flex-direction: column;
}

.cp-home-section--layout-blocks .cp-location-card,
.cp-home-section--layout-blocks .cp-team-card,
.cp-home-section--layout-blocks .cp-custom-card {
    width: 100%;
}

/* Alignment: the section's own title/link text-align covers both --
   text-align on a block heading centers its text, and on the inline-block
   .cp-home-section__link it centers the whole element. Only meaningful to
   also push the grid/carousel row itself when there's leftover row width
   to distribute -- blocks is already full-width, so it's left out. */
.cp-home-section--align-center { text-align: center; }
.cp-home-section--align-right { text-align: right; }

.cp-home-section--align-center.cp-home-section--layout-grid .cp-locations-grid,
.cp-home-section--align-center.cp-home-section--layout-grid .cp-team-grid,
.cp-home-section--align-center.cp-home-section--layout-grid .cp-custom-cards,
.cp-home-section--align-center.cp-home-section--layout-carousel .cp-locations-grid,
.cp-home-section--align-center.cp-home-section--layout-carousel .cp-team-grid,
.cp-home-section--align-center.cp-home-section--layout-carousel .cp-custom-cards {
    justify-content: center;
}

.cp-home-section--align-right.cp-home-section--layout-grid .cp-locations-grid,
.cp-home-section--align-right.cp-home-section--layout-grid .cp-team-grid,
.cp-home-section--align-right.cp-home-section--layout-grid .cp-custom-cards,
.cp-home-section--align-right.cp-home-section--layout-carousel .cp-locations-grid,
.cp-home-section--align-right.cp-home-section--layout-carousel .cp-team-grid,
.cp-home-section--align-right.cp-home-section--layout-carousel .cp-custom-cards {
    justify-content: flex-end;
}