/**
 * @file
 * Flexible Cards — a configurable grid of cards with per-card background and
 * text colour. Block-level column count via .fc-cols-N; per-card colour via
 * .fc-bg-* / .fc-text-*. Checklists reuse ul.tickli (style.css).
 */

.fc-grid {
  display: grid;
  gap: 1.75rem;
  align-items: stretch;
}

.fc-cols-1 { grid-template-columns: 1fr; }
.fc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fc-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ---- Card shell ----------------------------------------------------------- */
.fc-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 16px;
  height: 100%;
  border: 1px solid transparent;
}

/* Header: icon beside the eyebrow/title. */
/* Icon centred against the heading group rather than top-aligned. The two are
   close in height, so flex-start left the text looking a shade low next to the
   tile — see the eyebrow line-height note below for why. The column variants
   (fc-icon-top / fc-icon-center) set their own align-items and are unaffected. */
.fc-card__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.fc-card__headings {
  min-width: 0;
}

.fc-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--phi-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-card__icon img,
.fc-card__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* line-height is set on purpose: without it the eyebrow inherits the body's
   28px, which on a 12.8px font leaves ~7px of half-leading above the caps. The
   box then measures taller than the text looks, and the heading group reads as
   sitting low beside the icon however the two are aligned. */
.fc-card__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fc-card__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

.fc-card__body {
  margin-top: 1.1rem;
  font-size: 0.975rem;
  line-height: 1.65;
}

/* An eyebrow + title is a two-line heading block that needs the copy set well
   clear of it. A card headed by just an icon and a title does not, and 1.1rem
   reads as a gap rather than a group — the design sets it tighter. */
.fc-card:not(.fc-has-eyebrow) .fc-card__body {
  margin-top: 0.5rem;
}

.fc-card__body p:last-child {
  margin-bottom: 0;
}

/* Checklist (ul.tickli provides the orange ticks). */
.fc-card__list.tickli {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0 0 0 20px;
}

/* When there is no body, keep the list clear of the header. */
.fc-card__head + .fc-card__list.tickli {
  margin-top: 1.6rem;
}

/* ---- Background colours ---------------------------------------------------- */
.fc-bg-none { background: transparent; }
.fc-bg-white { background: #fff; border-color: var(--phi-gray-200); }
.fc-bg-grey { background: var(--phi-gray-300); }
.fc-bg-lightblue { background: #f0f9ff; }
.fc-bg-dark { background: #2c2f34; }
.fc-bg-green { background: var(--phi-green); }
.fc-bg-orange { background: var(--phi-orange); }

/* ---- Text colours --------------------------------------------------------- */
.fc-text-default,
.fc-text-default .fc-card__title { color: var(--phi-dark); }
.fc-text-default .fc-card__body { color: var(--phi-gray-600); }
/* Dark-text cards: eyebrow is orange (matches the mockups). */
.fc-text-default .fc-card__eyebrow { color: var(--phi-orange); }

.fc-text-white,
.fc-text-white .fc-card__title { color: #fff; }
.fc-text-white .fc-card__body { color: rgba(255, 255, 255, 0.82); }
/* White-text cards: eyebrow is a muted white. */
.fc-text-white .fc-card__eyebrow { color: rgba(255, 255, 255, 0.6); }
.fc-text-white .tickli li { color: rgba(255, 255, 255, 0.9); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
  .fc-cols-3,
  .fc-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .fc-cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .fc-grid { gap: 1.25rem; }
  .fc-cols-2,
  .fc-cols-3,
  .fc-cols-4,
  .fc-cols-5 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Linked cards
   The whole card becomes an <a> when a Link is set, so it must not inherit
   link styling from the theme.
   ========================================================================== */
a.fc-card,
a.fc-card:hover,
a.fc-card:focus-visible {
    text-decoration: none;
    border-bottom: none;
}
.fc-card.fc-is-link {
    cursor: pointer;
}
.fc-card.fc-is-link:hover,
.fc-card.fc-is-link:focus-visible {
    border-color: var(--phi-orange);
    box-shadow: 0 6px 20px rgba(245, 120, 32, 0.12);
    transform: translateY(-3px);
}
.fc-card.fc-is-link:hover .fc-card__title {
    color: var(--phi-orange);
}
/* White text variants keep their own colour on hover. */
.fc-card.fc-text-white.fc-is-link:hover .fc-card__title {
    color: #fff;
}

/* ==========================================================================
   Icon position
   ========================================================================== */
.fc-card.fc-icon-center .fc-card__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
}
.fc-card.fc-icon-center .fc-card__headings,
.fc-card.fc-icon-center .fc-card__body {
    text-align: center;
}
.fc-card.fc-icon-center .fc-card__list.tickli {
    text-align: start;
}

/* Icon above the title but left aligned — the Installation Scope treatment.
   Same stacking as fc-icon-center without the centring. */
.fc-card.fc-icon-top .fc-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

/* ==========================================================================
   Photo variant — mirrors the .card-block treatment used by the
   news / knowledge centre listings: image flush to the top, copy padded below.
   ========================================================================== */
.fc-card.fc-has-image {
    padding: 0;
    overflow: hidden;
}
.fc-card__image {
    display: block;
    line-height: 0;
    background: var(--phi-secondary, var(--phi-gray-300));
}
.fc-card__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}
.fc-card.fc-is-link:hover .fc-card__image img {
    transform: scale(1.04);
}
.fc-card__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

/* ==========================================================================
   Carousel — Slick supplies .slick / .slick__slider / .slick__slide, matching
   the product category slider. These rules only make the cards behave inside
   a track (equal heights, gutters) and place the arrows.
   ========================================================================== */
.fc-carousel .slick__slide {
    height: auto;
    padding: 0 10px;
}
.fc-carousel .slick-track {
    display: flex;
    align-items: stretch;
}
.fc-carousel .slick-track > .slick__slide {
    display: flex;
    float: none;
    height: auto;
}
.fc-carousel .slick__slide > .fc-card,
.fc-carousel .slick__slide > * {
    width: 100%;
}
.fc-carousel .slick-list {
    /* Negative margin restores the gutter the slide padding adds; the vertical
       padding stops the cards' lifted hover state being clipped. */
    margin: 0 -10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Slick sets display:none on the track before init; keep the grid usable if JS
   never runs. */
.fc-carousel .slick:not(.slick-initialized) .slick__slide {
    display: inline-block;
    vertical-align: top;
}

/* Intro copy above the cards (the block's Intro / body field). */
.fc-intro {
    margin: 0 0 2rem;
}
.fc-intro > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Mobile-only carousel (JS-driven, see js/flexible-cards.js)
   Desktop keeps the plain grid; below 768px Slick takes the same element over.
   Arrows and dots come from component/field-slick-cards.css via the
   `slick-cards` class the block template adds — nothing is restyled here.
   ========================================================================== */
@media (max-width: 767px) {
    .fc-grid.slick-initialized {
        display: block;
    }
    .fc-grid.slick-initialized .slick-slide {
        height: auto;
        padding: 0 4px;
    }
    /* .slick-list is overflow:hidden and the card sits flush against its top
       edge, so the 3px translateY lift on hover (plus the 1px border) was
       being clipped — the orange outline lost its top edge. Pad the track so
       the lifted state has somewhere to go. */
    .fc-grid.slick-initialized .slick-list {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .fc-grid.slick-initialized .slick-track {
        display: flex;
        align-items: stretch;
    }
    .fc-grid.slick-initialized .slick-slide > div,
    .fc-grid.slick-initialized .slick-slide .fc-card {
        height: 100%;
    }
}

/* ==========================================================================
   Icon background
   The green tile is the default; "none" is for icons that already carry their
   own colour and should sit bare on the card (the industries / certifications
   grids), in which case the glyph grows to fill the space the tile took.
   ========================================================================== */
.fc-card.fc-icon-bg-green .fc-card__icon { background: var(--phi-green); }
.fc-card.fc-icon-bg-orange .fc-card__icon { background: var(--phi-orange); }
.fc-card.fc-icon-bg-none .fc-card__icon {
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
}
.fc-card.fc-icon-bg-none .fc-card__icon img,
.fc-card.fc-icon-bg-none .fc-card__icon svg {
    width: 34px;
    height: 34px;
}

/* ==========================================================================
   Title size — 1rem is the default (Medium).
   ========================================================================== */
.fc-card.fc-title-small .fc-card__title { font-size: 0.95rem; line-height: 1.35; }
.fc-card.fc-title-medium .fc-card__title { font-size: 1rem; line-height: 1.35; }
.fc-card.fc-title-large .fc-card__title { font-size: 1.35rem; line-height: 1.3; }

/* ==========================================================================
   Linked cards must not pick up the site's dotted body-link underline.
   `.region-content a { border-bottom: .1rem dotted }` in global.css has the
   same specificity as `a.fc-card` but loads later (theme group beats
   component), so the block prefix is needed to win. The FULL border is
   declared, not just border-bottom, or the orange hover outline loses its
   bottom edge.
   ========================================================================== */
.fc-block a.fc-card,
.fc-block a.fc-card:active {
    border: 1px solid transparent;
    text-decoration: none;
}
.fc-block a.fc-card:hover,
.fc-block a.fc-card:focus-visible {
    border: 1px solid var(--phi-orange);
    text-decoration: none;
}