/**
 * Taxonomy term pages driven by TVI (industry, manufacturer, service_category).
 *
 * These render product_taxonomy:page_1, whose header holds the term heading and
 * the term entity (its image and description) above the product card grid. The
 * card grid itself is styled by .fourcolumn / .card-block in global.css; only
 * the intro band is dealt with here.
 *
 * The product_category term pages do NOT come through here. They render through
 * the taxonomy_term view and the term's own Layout Builder display, and are
 * deliberately left alone.
 */

/* --- The intro band ----------------------------------------------------- */

/* The grid goes on .content, not on .taxonomy-term: the fields are children of
   an inner .content wrapper, so a grid on .taxonomy-term has exactly one item
   and the fields just stack inside it. */
.view-id-product_taxonomy .view-header .taxonomy-term > .content {
    display: grid;
    /* Text takes the larger share; the image column never exceeds 44% and can
       shrink, hence minmax with a 0 floor rather than a bare percentage. */
    grid-template-columns: 1fr minmax(0, 44%);
    gap: clamp(1.5rem, 3vw, 3rem);
    /* start, not center: these descriptions vary from 550 to 3,700 characters,
       and centring left the image floating halfway down a long column with a
       gap above it. Aligned to the top it always sits level with the opening
       line, whatever the length. */
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Source order is image then description, because that is the order the fields
   sit in on the term display. The image belongs on the right, so the two are
   placed explicitly rather than reordered in the display — that keeps the
   admin-facing field order matching how the old site read, top to bottom. */
.view-id-product_taxonomy .view-header .field--name-description {
    grid-column: 1;
    grid-row: 1;
}

.view-id-product_taxonomy .view-header .field--name-field-category-image {
    grid-column: 2;
    grid-row: 1;
}

.view-id-product_taxonomy .view-header .field--name-field-category-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    /* The source images are a mix of shapes; a fixed ratio keeps the band from
       jumping around between one industry and the next. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
}

/* --- Copy --------------------------------------------------------------- */

.view-id-product_taxonomy .view-header .field--name-description {
    color: var(--phi-gray-600);
    line-height: 1.75;
}

.view-id-product_taxonomy .view-header .field--name-description > *:first-child {
    margin-top: 0;
}

.view-id-product_taxonomy .view-header .field--name-description > *:last-child {
    margin-bottom: 0;
}

/* Most of these descriptions carry one inline image of their own from the old
   site, on top of the featured one in the column beside them. Left unstyled they
   sat at their native pixel width with square corners and read as an accident;
   given the same rounding as the featured image they read as part of the page. */
.view-id-product_taxonomy .view-header .field--name-description img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin-block: 0.5rem 1.25rem;
}

/* Several of them are wrapped in a heading, which would otherwise put heading
   margins around a picture. */
.view-id-product_taxonomy .view-header .field--name-description h3:has(> img) {
    margin: 0;
}

/* Deliberately NOT line-clamped. The longest of these (Automotive, ~3,700
   characters) does push the product grid well down the page, but clamping it
   would hide imported copy behind nothing the visitor can click, which is worse
   than a long read. If it needs shortening, shorten the source text. */

/* --- Heading ------------------------------------------------------------ */

.view-id-product_taxonomy .view-header .page-header {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Narrow screens ----------------------------------------------------- */

@media only screen and (max-width: 900px) {
    .view-id-product_taxonomy .view-header .taxonomy-term > .content {
        grid-template-columns: 1fr;
    }
    /* Stacked, the image leads: it is the thing that says what the page is
       about before any of the copy has been read. */
    .view-id-product_taxonomy .view-header .field--name-field-category-image {
        grid-column: 1;
        grid-row: 1;
    }
    .view-id-product_taxonomy .view-header .field--name-description {
        grid-column: 1;
        grid-row: 2;
    }
    .view-id-product_taxonomy .view-header .field--name-field-category-image img {
        aspect-ratio: 16 / 9;
    }
}

/* --- Breadcrumb --------------------------------------------------------- */

/* The breadcrumb block is placed only on these pages (see script 126), so the
   spacing is set here rather than in the shared breadcrumb stylesheet. */
.page-breadcrumb:has(#block-phi-taxonomy-breadcrumbs) {
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
}

/* --- The industry index at /products/industry --------------------------- */

/* The cards use the media_thumbnail formatter, which emits a bare <img> with no
   .field--type-image wrapper, so global.css's .force3x2 never applies to them.
   The three_by_two image style is a manual crop and falls back to the original
   where no crop has been set, so the source ratios came through unchanged and
   the cards sat at different heights. Pinning the ratio here does the job the
   crop was meant to. */
.view-id-industry_index .views-field-field-category-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}