/* ==========================================================
   PUBLIC COMPANY PLATFORM -- CUSTOM SECTIONS, admin-authored cards
   (text/image/link/CTA) on a custom homepage section
   (company_homepage_section_cards via Company::public.home_sections.
   custom_cards). Loads after 09_layout_alignment.css targets
   .cp-custom-cards/.cp-custom-card generically alongside the other
   three content grids -- see that file's own header.
========================================================== */

.cp-custom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.cp-custom-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
}

.cp-custom-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cp-custom-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cp-custom-card__title {
    margin: 0;
    padding: 16px 18px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-heading);
}

.cp-custom-card__title:first-child,
.cp-custom-card__text:first-child {
    padding-top: 18px;
}

.cp-custom-card__title + .cp-custom-card__text {
    padding-top: 4px;
}

.cp-custom-card__text {
    margin: 0;
    padding: 16px 18px 0;
    font-size: 14px;
    color: var(--cp-text);
}

.cp-custom-card__cta {
    display: inline-block;
    align-self: flex-start;
    margin: 12px 18px 18px;
    padding: 9px 20px;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.cp-custom-card__cta:hover { opacity: .92; }

/* Where the button sits in its card. The card is a flex column, so
   align-self is what moves the button across it -- text-align would move
   the label inside the button and leave the button where it was. Only
   the two non-default values need a rule; left is .cp-custom-card__cta's
   own align-self: flex-start. */
.cp-custom-card__cta.cp-cta--align-center { align-self: center; }
.cp-custom-card__cta.cp-cta--align-right  { align-self: flex-end; }

/* ---- A call to action drawn from one of the page's reusable buttons ----
   Added to the hero and card CTA anchors when the owner picked a button;
   a plain typed label never gets these. Background and ink arrive inline
   from the button (they are data), so only shape and the icon live here.
   The icon is inline SVG on currentColor -- the inline `color` recolours
   it for free. */
/* a.cp-cta, not .cp-cta: .cp-store-hero__cta is declared in a LATER file and
   sets display itself, so a bare class here lost on source order and the
   hero icon sat flush against its label. Element+class outranks a class
   wherever it loads. */
a.cp-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* a.cp-cta--*, not .cp-cta--*: .cp-store-hero__cta sets its own pill radius
   in a LATER file, so a bare class here lost on source order and a hero
   button stayed a pill after the owner made it square. Same trap, same
   fix, as a.cp-cta above. */
a.cp-cta--pill    { border-radius: 999px; }
a.cp-cta--rounded { border-radius: 8px; }
a.cp-cta--square  { border-radius: 0; }

.cp-cta__icon {
    display: inline-flex;
    line-height: 0;
}

.cp-cta__icon svg {
    width: 16px;
    height: 16px;
}

/* Whole-card link, no separate CTA button/text at all -- a link with no
   cta_label used to fall back to a plain "Learn more" text link
   (.cp-custom-card__cta--plain, removed); the card itself being
   clickable/hoverable is meant to read as "this is tappable" on its own,
   same reasoning custom_cards.php's own comment gives. */
.cp-custom-card--linked {
    color: inherit;
    text-decoration: none;
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
}

.cp-custom-card--linked:hover,
.cp-custom-card--linked:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 21, 29, .12);
}

/* -- Flat/icon-strip card style (CompanyHomepageSectionRepository::
   CARD_STYLES 'flat', migration 0478) -- no card chrome at all: an
   icon-sized image beside a title+description+CTA column, sitting
   directly on the section's own background. --on-dark is added by the
   renderer (HomepageSectionRenderer::renderCustomCards(), via
   App\Shared\Support\ColorContrast) only when the admin's chosen
   background_color is dark enough that the default dark text/heading
   tokens would be unreadable -- 'photo' cards never get either
   modifier, since they keep their own opaque white background
   regardless of the section's. -- */

/* Flat and Thumbnail are the same LAYOUT -- a row of surface-less cards,
   picture beside the words. They differ only in how the picture is
   drawn, so everything but the image rule is shared between them rather
   than written twice and left to drift. */
.cp-custom-cards--flat,
.cp-custom-cards--thumbnail {
    /* An icon row is a row: at 220px a five-step process wrapped 4 + 1,
       which reads as a mistake rather than as a sequence. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px 28px;
}

.cp-custom-cards--flat .cp-custom-card,
.cp-custom-cards--thumbnail .cp-custom-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 0;
}

.cp-custom-cards--flat .cp-custom-card__image {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
    border-radius: var(--cp-radius-pill);
    background: color-mix(in srgb, var(--cp-primary, #137A5A) 14%, transparent);
}

.cp-custom-cards--flat .cp-custom-card__title,
.cp-custom-cards--flat .cp-custom-card__text,
.cp-custom-cards--thumbnail .cp-custom-card__title,
.cp-custom-cards--thumbnail .cp-custom-card__text {
    padding: 0;
}

.cp-custom-cards--flat .cp-custom-card__title + .cp-custom-card__text,
.cp-custom-cards--thumbnail .cp-custom-card__title + .cp-custom-card__text {
    padding-top: 2px;
}

.cp-custom-cards--flat .cp-custom-card__cta,
.cp-custom-cards--thumbnail .cp-custom-card__cta {
    margin: 8px 0 0;
}

/* The one thing Thumbnail does differently: a real square photo, cropped
   to fill rather than fitted inside a tinted circle. No padding or tint
   -- those exist to give a line-art icon a surface to sit on, and a
   photograph is its own surface. */
.cp-custom-cards--thumbnail .cp-custom-card__image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* The heading belongs to the SECTION, not to the cards, so it needs its
   own inversion -- the card rules below only fire for flat cards, and a
   dark section full of photo cards still has a heading sitting directly
   on that dark ground. */
.cp-home-section--on-dark .cp-home-section__title {
    color: var(--cp-inverse);
}

.cp-custom-cards--on-dark .cp-custom-card__title {
    color: var(--cp-inverse);
}

.cp-custom-cards--on-dark .cp-custom-card__text {
    color: var(--cp-inverse);
    opacity: .88;
}


/* ==========================================================
   CONTENT BAND (shared Public Website primitive)
   ----------------------------------------------------------
   A section of copy rather than a collection -- see
   app/Shared/Views/public_website/content_band.php. It needs no layout
   of its own: the section shell already supplies background, full width,
   alignment and device visibility, so all that is left is the paragraph.
========================================================== */

.cp-content-band__text {
    margin: 0;
    max-width: 70ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cp-text);
}

/* Inside the two-column row, the COLUMN is already the bound -- an owner
   who put a band beside a side panel has narrowed the measure on
   purpose, and 70ch narrowing it again just leaves a ragged gap that
   reads as a bug rather than as typography. Everywhere else the band
   spans the page (content width, or edge to edge when full width) and
   the cap is doing real work: at 1240px a 14.5px line runs past 160
   characters, which is where the eye starts losing its place returning
   to the next line.

   Stated as a context override rather than a per-section control: it is
   a consequence of the layout the owner already chose, not a separate
   decision to make twice. */
.cp-home-columns .cp-content-band__text {
    max-width: none;
}

/* Alignment centres the copy block itself, not just its text -- a
   max-width paragraph left in place would read as left-aligned however
   its text was set. */
.cp-home-section--align-center .cp-content-band__text {
    margin-left: auto;
    margin-right: auto;
}

.cp-home-section--align-right .cp-content-band__text {
    margin-left: auto;
}