/* =========================================================================
   22_main_column_switch.css
   OWNS: the homepage main column's one-section-at-a-time panes, the View
   button on each side-panel card, and the branch cards (with their maps)
   that the Locations pane renders.

   DO NOT PUT HERE: anything about the side panel's own layout, the tab
   strip, or section chrome -- 07_homepage.css owns those and is on the
   protected list precisely because it keeps being edited from the side.
   Every selector below starts with .cp-main-switch, .cp-panel-card,
   .cp-branches or .cp-branch-card, so this file cannot reach any of it.

   This stylesheet is PAGE-SCOPED (passed through 'pageStyles' by
   CompanyPublicProfileController::show()), never added to the global
   list -- the global list reaches every public page at once, which is
   how the landing page got overwritten before.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The panes
   ------------------------------------------------------------------------- */

/* The hidden attribute does the hiding, so the page is correct before any
   JS runs -- but a pane's own display rule would win over the UA default,
   so this states it. */
.cp-main-switch__pane[hidden] {
    display: none !important;
}

/* Every pane starts where the FEED starts. .cp-home-section carries
   margin:20px 0 0 in the main column (07_homepage.css), so the Updates
   pane was standing off the band above it while About and Branches sat
   flush against it. Stated on the pane's first child rather than added
   to it, so the feed's own margin is matched, not doubled -- and the
   number is the same one 07_homepage.css uses, deliberately. */
.cp-main-switch__pane > :first-child {
    margin-top: 20px;
}

/* -------------------------------------------------------------------------
   Card elevation, main column only
   ------------------------------------------------------------------------- */

/* --cp-shadow-card (01_tokens.css) is the product's one card shadow --
   the same value the Store and Appointment pages carry. It is applied
   HERE, scoped to .cp-main-switch__pane, and NOT in 20_elevation.css:
   that file owns the shadow for those two surfaces and its own header
   says a landing-page selector must never be added to it, because doing
   so silently overrides CSS that lives elsewhere. Scoping to the pane
   keeps this off every other part of the landing page.

   Feed posts are included deliberately. They carried no shadow before
   -- .cp-post sets only surface/border/radius -- so without this the
   Updates pane would be the one flat pane among three. The same post on
   a page outside the main column is untouched. */
.cp-main-switch__pane .cp-post,
.cp-main-switch__pane .cp-branch-card,
.cp-main-switch__pane .cp-about-card {
    box-shadow: var(--cp-shadow-card);
}

/* -------------------------------------------------------------------------
   The View button on a side-panel card
   ------------------------------------------------------------------------- */

/* The link sits ON the card's own title row, at its right edge -- the
   treatment the Updates card already had and the one every card now
   shares. It is positioned rather than placed because the title is
   inside each section's own markup, which this feature does not edit.
   The offsets are measured against the real cards: a section's inner
   pads 10px/20px, the Updates card pads 14px, and the title's line box
   is 34px tall in both. */
.cp-panel-card {
    position: relative;
}

.cp-panel-card__view {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cp-primary, #137A5A);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.cp-panel-card--updates .cp-panel-card__view {
    top: 24px;
    right: 14px;
}

.cp-panel-card__view:hover {
    text-decoration: underline;
}

.cp-panel-card__view:focus-visible {
    outline: 2px solid var(--cp-primary, #137A5A);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Branch cards -- the Locations pane
   ------------------------------------------------------------------------- */

/* Stacked full width with a 16px gap -- the same shape .cp-post-feed
   gives the posts in the pane next door (08_content.css). A branch is a
   card in a column, not a tile in a grid. */
.cp-branches__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-branches__empty {
    margin: 0;
    color: var(--cp-text-faint, #64748B);
}

/* .cp-post's chrome exactly (08_content.css): the same surface, the same
   border, the same radius token, the same overflow clip. Written out
   rather than sharing the class, because a branch is not a post and
   should not inherit a post's behaviour by accident -- but it must not
   look like a different product either. */
.cp-branch-card,
.cp-about-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
}

/* The map is the card's media, and it behaves like a post's: full width,
   flush to the card's edges, capped so a tall card cannot push the rest
   of the column off the screen. An aspect ratio rather than a height, so
   it holds its shape at every column width and never collapses while the
   frame is still loading. */
.cp-branch-card__map {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    background: var(--cp-surface-muted, #F1F5F9);
}

.cp-branch-card__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 18px 20px -- .cp-post__header/.cp-post__body's own insets, so a branch
   card's text sits on the same left edge as a post's. */
.cp-branch-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 20px;
}

/* .cp-post__title's size and weight. */
.cp-branch-card__name {
    margin: 0;
    color: var(--cp-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.cp-branch-card__address {
    margin: 0;
    color: var(--cp-text-faint, #64748B);
    font-size: .8125rem;
    line-height: 1.45;
}

.cp-branch-card__directions {
    align-self: flex-start;
    margin-top: 2px;
    color: var(--cp-primary, #137A5A);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cp-branch-card__directions:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   The About card -- the same wrapper, around the native About block
   ------------------------------------------------------------------------- */

/* The block inside is the one /c/{slug}/about renders, so it arrives with
   its own .cp-section spacing. The wrapper supplies the card; these two
   rules stop the block's page-level padding from fighting it. */
.cp-about-card > .cp-section {
    margin: 0;
    padding: 18px 20px 20px;
}

/* Flush to the card's edges and capped, exactly like a post's picture
   (.cp-post__media img) -- the negative margins pull it back out of the
   padding above rather than asking the block inside to change. */
.cp-about-card .cp-about__image {
    display: block;
    width: calc(100% + 40px);
    max-width: none;
    max-height: 420px;
    margin: 16px -20px -20px;
    object-fit: cover;
}

/* The native /about PAGE renders the same view with no image, so nothing
   above can reach it there -- but if a future caller passes one outside a
   card, it should still behave. */
.cp-about__image {
    display: block;
    width: 100%;
    border-radius: var(--cp-radius-md);
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 560px) {
    /* One column: two 130px-wide maps side by side show nothing useful. */
    .cp-branches__grid {
        grid-template-columns: 1fr;
    }

    /* NO PREVIEW CARDS AT THIS WIDTH.
       The tab strip is the navigation here -- a tap on a tab opens that
       section in the main column directly -- so an excerpt of the same
       section sitting between the tab and the content is a second copy
       of it the reader has to scroll past to reach the real one.

       Scoped inside .cp-panel-tabs deliberately: that wrapper only
       exists when there is more than one panel section (home.php). A
       lone card has no tab strip to replace it, so it keeps showing. */
    .cp-panel-tabs .cp-panel-card {
        display: none;
    }
}