/**
 * =============================================================================
 * HIPHEN — Block: crop-grid
 * =============================================================================
 * Scoped to the crop grid itself (cards + inline modal + product cards
 * inside the modal). The page hero and the demo-request footer are
 * delivered by dedicated blocks (hero-banner, request-demo) and are not
 * concerns of this stylesheet.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * CROP GRID
 * --------------------------------------------------------------------------- */
.crop-grid {
    /* Max-width includes the gutter so the inner content area stays at the
       Figma-intended 1200px (var(--container-content)) on wide viewports,
       with var(--padding-x) of breathing room on each side. */
    max-width: calc(var(--container-content) + 2 * var(--padding-x));
    margin: 0 auto;
    /* Asymmetric block padding: tight gap below the hero (var(--space-12) =
       24px) so the grid reads as the continuation of the hero, then a
       regular var(--space-40) = 80px breath before the next section. */
    padding: var(--space-12) var(--padding-x) var(--space-40);
}

.crop-grid__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10); /* 20px */
    grid-auto-rows: minmax(var(--crop-card-min-height), auto);
}

.crop-grid__card {
    position: relative;
    border: var(--crop-card-border);
    border-radius: var(--crop-card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: var(--crop-card-min-height);
}

.crop-grid__card.tall {
    grid-row: span 1;
}

.crop-grid__card.wide {
    grid-column: span 2;
}

.crop-grid__card.fullwidth {
    grid-column: 1 / -1;
}

.crop-grid__card.active {
    border-color: var(--color-light-green);
    box-shadow: var(--shadow-glow-green);
}

/* When a modal is open, fade + blur the non-active cards so the clicked
   card and its inline modal become the visual focus. Pointer-events are
   disabled so a misclick on a dimmed card doesn't hijack the flow. The
   existing .crop-grid__card `transition: all 0.3s ease` carries these
   properties in and out smoothly. */
.crop-grid__wrapper.has-modal-open .crop-grid__card:not(.active) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
}

.crop-grid__card:hover {
    border-color: var(--color-white-40);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.crop-grid__card-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.crop-grid__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crop-grid__card-label {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5); /* 10px */
    padding: var(--space-8); /* 16px */
    background: var(--gradient-card-label-fade);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-20);
    border-radius: var(--crop-card-label-radius);
    transition: background var(--transition-base);
}

.crop-grid__card:hover .crop-grid__card-label {
    background: var(--gradient-card-label-fade-hover);
}

.crop-grid__card-title {
    flex: 1;
    font-weight: var(--fw-bold);
    font-size: var(--text-xl); /* 20px */
    line-height: 1.4;
    text-transform: capitalize;
}

/* Mirror of .solution-card__arrow — same pill + design system tokens so
   the two arrow patterns stay visually identical. */
.crop-grid__card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--gradient-radial-green);
    border: var(--border-pill);
    border-radius: 22px;
    color: var(--color-white);
    cursor: pointer;
    transition: transform var(--transition-base);
}

.crop-grid__card-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition-base);
}

/* Hover: subtle nudge to the right, matching .solution-card__arrow behaviour. */
.crop-grid__card:hover .crop-grid__card-button svg {
    transform: translateX(2px);
}

/* Active (card expanded, modal open): arrow rotates 90deg to point down. */
.crop-grid__card.active .crop-grid__card-button svg {
    transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
 * INLINE MODAL SHELL
 * --------------------------------------------------------------------------- */
.crop-modal-inline {
    grid-column: 1 / -1;
    /* min-width: 0 is required on grid items whose children may have a
       wide intrinsic size (trait grid rows, long titles, wide tags).
       Without this, the grid item grows to fit and overflows the row. */
    min-width: 0;
    /* The grid-template-rows 0fr → 1fr trick lets the modal expand to its
       content's real height (no hardcoded max-height ceiling, no JS
       measurement). The wrapper below handles clipping during the
       collapsed/expanding state. */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.crop-modal-inline.is-open {
    grid-template-rows: 1fr;
}

.crop-modal-inline__wrapper {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 24px 0;
    /* Wrapper fades + scales with a soft overshoot in tandem with the
       height animation, so the modal feels like it's emerging from the
       card row rather than just drawing in place. */
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
    transform-origin: top center;
    transition: opacity 0.35s ease,
                transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.crop-modal-inline.is-open .crop-modal-inline__wrapper {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Close button sits inside .modal-header as its last flex child.
   margin-left: auto pushes it to the far right while align-items: center
   (inherited from .modal-header) keeps it vertically aligned with the
   crop title row — no more absolute positioning drift. */
.crop-modal-inline__close {
    margin-left: auto;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: var(--space-4); /* 8px */
    background: var(--gradient-card-label-fade);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-20);
    border-radius: var(--radius-circle);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-base);
}

.crop-modal-inline__close:hover {
    background: var(--gradient-card-label-fade-hover);
    transform: rotate(90deg);
}

.crop-modal-inline__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md); /* 16px */
}

/* ---------------------------------------------------------------------------
 * CROP GRID RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .crop-grid__wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .crop-grid {
        /* Keep the asymmetric top/bottom rhythm at this breakpoint —
           tight gap with the hero, breathing room before next section. */
        padding: var(--space-12) var(--padding-x-md) var(--space-30);
    }

    .crop-grid__wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .crop-grid__card {
        min-height: 240px;
    }

    .crop-grid__card.wide {
        grid-column: span 1;
    }

    .crop-grid__card.fullwidth {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .crop-grid {
        padding: var(--space-10) var(--padding-x-sm) var(--space-20);
    }

    .crop-grid__wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .crop-grid__card {
        min-height: 200px;
    }

    .crop-grid__card.wide {
        grid-column: span 1;
    }

    .crop-grid__card.fullwidth {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------------------
 * MODAL CONTENT (injected inside .crop-modal-inline__wrapper)
 * --------------------------------------------------------------------------- */
.crop-modal {
    background: var(--gradient-modal-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius); /* var(--radius-xl) = 24px */
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-10); /* 20px */
    padding: var(--space-16) var(--space-20); /* 32px 40px */
    border-bottom: 1px solid var(--color-white-10);
}

.modal-header__icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md); /* 16px */
    background: var(--color-light-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    font-size: 48px;
}

.modal-header__title {
    font-size: var(--text-3xl); /* 42px */
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.modal-content {
    padding: var(--space-20); /* 40px */
}

.recommended-section {
    margin-bottom: var(--space-20); /* 40px */
}

.section-title {
    font-size: var(--text-lg); /* 16px */
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-10); /* 20px */
    display: flex;
    align-items: center;
    gap: var(--space-4); /* 8px */
}

.section-title--primary {
    color: var(--color-light-green);
    text-transform: uppercase;
}

.section-title--secondary {
    color: var(--color-white);
}

.recommended-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) 30px; /* 16px row gap, 30px column gap (out of scale, kept) */
    padding: var(--space-12); /* 24px */
    background: var(--color-glass-lime-15);
    border: 1px solid rgba(143, 191, 72, 0.35); /* TODO: tokenize as --color-glass-lime-35 if reused */
    border-radius: var(--radius-sm); /* 12px */
}

.trait-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5); /* 10px */
    flex: 0 1 calc(33.333% - 20px);
    min-width: 200px;
}

.trait-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: var(--space-1); /* 2px */
}

.trait-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* 6px */
}

.trait-item__name {
    font-size: var(--text-md); /* 15px */
    font-weight: var(--fw-bold);
    color: var(--color-light-green);
}

.trait-item__badges {
    display: flex;
    gap: var(--space-4); /* 8px */
    flex-wrap: wrap;
}

.trait-badge {
    display: inline-flex;
    padding: var(--space-2) var(--space-6); /* 4px 12px */
    border-radius: var(--radius-sm); /* 12px */
    font-size: var(--text-xs); /* 12px */
    font-weight: var(--fw-semibold);
}

.trait-badge--rgb {
    background: var(--color-light-green);
    color: var(--color-text-dark);
}

.trait-badge--ms {
    background: var(--color-blue-300);
    color: var(--color-text-dark);
}

.trait-badge--poc,
.trait-badge--lidar {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white-40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 2px var(--color-white-10);
}

.trait-badge--thermal {
    background: var(--color-accent-gold);
    color: var(--color-text-dark);
}

.other-traits-section {
    margin-bottom: var(--space-20); /* 40px */
}

.other-traits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-12); /* 12px 24px */
}

.other-trait {
    display: flex;
    align-items: center;
    gap: var(--space-5); /* 10px */
    min-width: 0; /* let the grid track shrink below the flex row's intrinsic width */
    font-size: var(--text-base); /* 14px */
}

.other-trait__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.other-trait__name {
    flex: 1;
    min-width: 0; /* allow long trait names to wrap instead of pushing the row wider */
    color: var(--color-white);
    font-weight: var(--fw-semibold);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.other-trait__badges {
    display: flex;
    gap: var(--space-3); /* 6px */
    flex-shrink: 0;
}

.other-trait__badge {
    padding: 3px 10px; /* tight badge — out of scale, kept */
    border-radius: 10px; /* badge radius — slightly tighter than --radius-sm */
    font-size: 11px;
    font-weight: var(--fw-semibold);
}

.categories-section {
    display: flex;
    gap: clamp(6px, 1.2vw, 12px);
    flex-wrap: nowrap;      /* tags always on one line */
    overflow-x: auto;        /* safety net if fluid sizing still overflows */
    min-width: 0;
    padding-top: var(--space-12); /* 24px */
    border-top: 1px solid var(--color-white-10);
    scrollbar-width: none;   /* Firefox */
}

.categories-section::-webkit-scrollbar { display: none; } /* Chromium / Safari */

.category-tag {
    flex-shrink: 0;            /* never shrink below text width */
    white-space: nowrap;       /* tag text stays on one line */
    /* Fluid font + padding: scales from narrow (phone) to wide (desktop). */
    padding: clamp(5px, 1vw, 8px) clamp(10px, 1.8vw, 16px);
    background: var(--color-glass-blue-50);
    border: 1px solid var(--color-white-20);
    border-radius: var(--radius-lg); /* 20px */
    font-size: clamp(10px, 1.6vw, 12px);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-white);
    transition: all var(--transition-base);
}

/* A chip is an <a> only when its segment has use cases behind it, so the
   pointer, the lift and the glow are scoped to that variant. An inert chip
   keeps the same look but stops advertising a destination it hasn't got. */
.category-tag--link {
    cursor: pointer;
    text-decoration: none;
}

.category-tag--link:focus-visible {
    outline: 2px solid var(--color-light-green);
    outline-offset: 2px;
}

.category-tag--link:hover,
.category-tag--link:focus-visible {
    background: rgba(143, 191, 72, 0.2); /* glass-lime at 20% — could be tokenized */
    border-color: rgba(143, 191, 72, 0.6); /* glass-lime at 60% — could be tokenized */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(143, 191, 72, 0.2); /* lime glow — close to --shadow-glow-green */
}

.footer-note {
    margin-top: var(--space-12); /* 24px */
    padding: var(--space-8); /* 16px */
    background: var(--color-glass-teal-30);
    border-radius: var(--radius-sm); /* 12px */
    display: flex;
    align-items: flex-start; /* anchor icon to the top-left when text wraps */
    gap: var(--space-6); /* 12px */
    min-width: 0;
    font-size: 13px;
    opacity: 0.8;
    color: var(--color-white);
}

.footer-note svg {
    flex-shrink: 0;
}

.footer-note span {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * PRODUCT CARDS GRID (inside modal)
 *
 * Cards themselves use the .solution-card.solution-card--image classes from
 * the solution-card block — solution-card/style.css must be loaded on the
 * page (handled by functions.php's global enqueue).
 *
 * Scoped overrides below adapt the solution card (designed for the Solutions
 * hub at ~1200px wide) to the narrower modal context. The base block is left
 * untouched so the Solutions page keeps its original layout.
 * --------------------------------------------------------------------------- */
.products-grid {
    display: grid;
    /* 260px min lets 3 cards fit in the modal (usable ~880px) on desktop.
       auto-fit drops to 2 or 1 column as the viewport narrows. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-10); /* 20px */
    margin: var(--space-12) 0; /* 24px */
    width: 100%;
}

/* --- Solution card overrides scoped to the modal -------------------------- */

.products-grid .solution-card--image {
    /* Let content set the height — no forced aspect-ratio in the narrower
       modal context (otherwise cards get disproportionately tall). */
    aspect-ratio: auto;
    min-height: 280px;
    min-width: 0; /* allow grid track to shrink below the card's intrinsic size */
}

/* One, two or three products all fill the modal width, with no per-count
   width rules: `auto-fit` collapses the tracks it cannot fill, so whatever
   cards are there share the whole row. A PhenoStation-only crop gets one
   full-width card, a two-product crop gets two half-width ones.

   A `max-width: 380px` cap used to sit here to stop the single card
   stretching, because at the base 280px height a full-width card is a ~3:1
   strip and its background photo reads as a letterbox slice. The cap is gone
   on purpose; the proportion is fixed where the problem actually is, by
   giving the wider card more height. Scoped above the single-column
   breakpoint: below it every card is full width already and keeps the
   narrow-screen heights set further down. */
@media (min-width: 641px) {
    .products-grid .solution-card:only-child {
        min-height: 400px;
    }
}

/* Compact hover — border colour change only, no translate that would escape
   the modal's bounding box. */
.products-grid .solution-card:hover {
    transform: none;
}

.products-grid .solution-card--image:hover .solution-card__bg {
    transform: scale(1.02); /* subtler zoom than the standalone variant */
}

/* Label: keep the floating glass pattern but tighter paddings so the image
   stays visually prominent inside the shorter card. */
.products-grid .solution-card--image .solution-card__label {
    padding: 14px;
    gap: 8px;
}

.products-grid .solution-card--image .solution-card__logo {
    height: 36px;
    max-width: calc(100% - 44px - 10px);
}

/* Descriptive sentence — drop capitalize so "Tailor-Made Imaging Stations…"
   doesn't re-capitalize already-cased words. Slightly smaller + 2 lines. */
.products-grid .solution-card--image .solution-card__title {
    font-size: var(--text-lg); /* 16px instead of 20px */
    line-height: 1.35;
    text-transform: none;
    -webkit-line-clamp: 2;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .products-grid {
        /* Below 640px there is never room for two cards side by side;
           force a single column so layout doesn't depend on intrinsic sizes. */
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .products-grid .solution-card--image {
        min-height: 240px;
    }
}

/* ---------------------------------------------------------------------------
 * MODAL CONTENT — RESPONSIVE
 * Placed at end of file so these rules override the modal base block above
 * (CSS cascade: equal specificity → later rule wins).
 * --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .modal-header {
        padding: 24px 28px;
        gap: 16px;
    }

    .modal-header__icon {
        width: 64px;
        height: 64px;
        font-size: 36px;
    }

    .modal-header__title {
        font-size: 32px;
    }

    .modal-content {
        padding: 28px;
    }

    .other-traits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .modal-header {
        padding: 20px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .modal-header__icon {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }

    .modal-header__title {
        font-size: 24px;
    }

    .modal-content {
        padding: 20px;
    }

    .recommended-section,
    .other-traits-section {
        margin-bottom: 28px;
    }

    .recommended-traits {
        padding: 16px;
        gap: 12px 12px;
    }

    /* Force 2 columns so the Hiphen Recommends block takes half the
       vertical room it would in a single column — the footer note and
       products grid come back into view without deep scrolling. */
    .recommended-traits .trait-item {
        flex: 0 1 calc(50% - 6px); /* 50% minus half the 12px column gap */
        min-width: 0;
    }

    .other-traits-grid {
        grid-template-columns: 1fr;
    }

    /* Base .categories-section already scales gap via clamp() — just pull
       the top padding in a bit since everything else is tighter here. */
    .categories-section {
        padding-top: 16px;
    }

    .footer-note {
        margin-top: 16px;
        padding: 12px;
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------------------
 * CROSS-LINK TO THE USE CASE LIBRARY
 * ---------------------------------------------------------------------------
 * Sits between the category tags and the footnote, mirroring the crop links
 * that the use-case detail panel points back here with. A quiet .link-arrow
 * rather than a pill: the products grid above already carries the loud CTAs.
 * --------------------------------------------------------------------------- */
.crop-modal__use-cases {
    /* .modal-content is a plain block, so the inline-flex link needs a top
       margin of its own to clear the category tags above it. */
    margin-top: var(--space-8); /* 16px */
}