/* NEC Summaries - Fixed Height template
   Tokens, all overridable with a Custom CSS Class on the block
   (Design > Custom CSS Class) or from theme CSS:
     --sum-h        card height          (default 420px)
     --sum-radius   corner radius        (default 12px)
     --sum-pad      panel padding, sides + top (default 48px)
     --sum-pad-b    panel padding, bottom      (default 64px)
     --sum-title-size / --sum-desc-size  type scale
     --sum-copy-w   max width of the text panel (default 66%)
     --sum-fade     depth of the fade into the bar colour (default 180px)
     --sum-overlap  how far above the image edge the fade reaches full black
                    (default 24px) - covers sub-pixel drift in the ratio maths
     --sum-bar      colour behind/below the image (default #000)
     --sum-scrim    peak opacity of the scrim at the bottom-left corner
                    (default 0.88) - set to 0 to switch it off
     --sum-scrim-w / --sum-scrim-h
                    reach of the scrim from the bottom-left corner, as a share
                    of card width (156%) and height (126%). Larger = the dark
                    spreads further right and further up
     --sum-fit      image fit, contain | cover (default contain)
                    contain = scale to block WIDTH, pinned top-left, overflow clipped
                    cover   = fill the whole block, cropped to centre */

/* Height modifiers */
.sum-h-240  { --sum-h: 240px; }
.sum-h-320  { --sum-h: 320px; }
.sum-h-400  { --sum-h: 400px; }
.sum-h-450  { --sum-h: 450px; }
.sum-h-480  { --sum-h: 480px; }
.sum-h-560  { --sum-h: 560px; }
.sum-h-70vh { --sum-h: 70vh; }
.sum-h-auto { --sum-h: auto; }

@media (max-width: 767px) {
    .sum-h-m-240  { --sum-h: 240px; }
    .sum-h-m-320  { --sum-h: 320px; }
    .sum-h-m-400  { --sum-h: 400px; }
    .sum-h-m-auto { --sum-h: auto; }
}

/* Corner radius modifiers */
.sum-r-0  { --sum-radius: 0; }
.sum-r-4  { --sum-radius: 4px; }
.sum-r-8  { --sum-radius: 8px; }
.sum-r-16 { --sum-radius: 16px; }
.sum-r-24 { --sum-radius: 24px; }

/* Padding modifiers */
.sum-p-24 { --sum-pad: 24px; --sum-pad-b: 32px; }
.sum-p-32 { --sum-pad: 32px; --sum-pad-b: 44px; }
.sum-p-48 { --sum-pad: 48px; --sum-pad-b: 64px; }
.sum-p-64 { --sum-pad: 64px; --sum-pad-b: 80px; }

/* Copy width modifiers */
.sum-w-50  { --sum-copy-w: 50%; }
.sum-w-60  { --sum-copy-w: 60%; }
.sum-w-80  { --sum-copy-w: 80%; }
.sum-w-100 { --sum-copy-w: 100%; }

/* Vertical position of the text panel - default is centred */
.sum-v-top    .sum-fixed .sum-fx { align-items: flex-start; }
.sum-v-center .sum-fixed .sum-fx { align-items: center; }
.sum-v-bottom .sum-fixed .sum-fx { align-items: flex-end; }

.sum-fixed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.sum-fixed .sum-fx {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--sum-radius, 12px);
    height: var(--sum-h, 420px);
    min-height: var(--sum-h, 420px);
    overflow: hidden;
    background: var(--sum-bar, #000);
    container-type: inline-size;
}

/* Scrim radiating out of the bottom-left corner, behind the copy */
.sum-fixed .sum-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: var(--sum-radius, 12px);
    background: radial-gradient(
        ellipse var(--sum-scrim-w, 156%) var(--sum-scrim-h, 126%) at 0% 100%,
        rgba(0, 0, 0, var(--sum-scrim, 0.88)) 0%,
        rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.78)) 30%,
        rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.42)) 55%,
        rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.14)) 75%,
        rgba(0, 0, 0, 0) 92%);
}

/* Scrim strength modifiers */
.sum-scrim-none  { --sum-scrim: 0; }
.sum-scrim-wide  { --sum-scrim-w: 200%; --sum-scrim-h: 155%; }
.sum-scrim-tight { --sum-scrim-w: 120%; --sum-scrim-h: 95%; }
.sum-scrim-light { --sum-scrim: 0.6; }
.sum-scrim-heavy { --sum-scrim: 0.95; }

/* The image is width-fitted, so when it is shorter than --sum-h a bar of
   --sum-bar shows underneath. Image height is 100cqw / aspect-ratio, so the
   fade can be parked exactly on the image's bottom edge and run to the card
   floor. If the image is taller than the card, top exceeds bottom and the
   element collapses to zero height, so this costs nothing in that case.
   cqw is width-relative, so this self-adjusts at every viewport size. */
.sum-fixed .sum-fx::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc((100cqw / var(--sum-img-ar, 2)) - var(--sum-fade, 180px));
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.12) calc(var(--sum-fade, 180px) * 0.3),
        rgba(0, 0, 0, 0.42) calc(var(--sum-fade, 180px) * 0.55),
        rgba(0, 0, 0, 0.78) calc(var(--sum-fade, 180px) * 0.78),
        var(--sum-bar, #000) calc(var(--sum-fade, 180px) - var(--sum-overlap, 24px)));
    border-radius: 0 0 var(--sum-radius, 12px) var(--sum-radius, 12px);
}

/* Cover fills the card, and auto height has no gap - no fade needed */
.sum-fit-cover .sum-fixed .sum-fx::after,
.sum-h-auto .sum-fixed .sum-fx::after {
    display: none;
}

/* Auto height puts the copy outside the image, so no scrim there */
.sum-h-auto .sum-fixed .sum-fx::before {
    display: none;
}

/* Fade depth modifiers */
.sum-fade-100 { --sum-fade: 100px; }
.sum-fade-240 { --sum-fade: 240px; }
.sum-fade-320 { --sum-fade: 320px; }

/* Default: scale to the block WIDTH, top-left corner pinned to the block.
   Height follows the image's own ratio; anything past the block height is
   clipped by the card's overflow: hidden. */
.sum-fixed .sum-fx-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100% !important;
    min-width: 100%;
    height: auto !important;
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: left top;
    display: block;
    border-radius: var(--sum-radius, 12px) var(--sum-radius, 12px) 0 0;
}

/* Theme sets `.ccm-page img { height: auto !important }` in main.css, so any
   height set here has to be !important to land. */
.sum-fit-cover .sum-fixed .sum-fx-bg {
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--sum-radius, 12px);
}

.sum-fixed .sum-fx-detail {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--sum-copy-w, 66%);
    padding: var(--sum-pad, 48px) var(--sum-pad, 48px) var(--sum-pad-b, 64px);
    color: #fff;
}

/* Beat theme rules that colour p / h4 inside the block */
.sum-fixed .sum-fx .sum-fx-detail,
.sum-fixed .sum-fx .sum-fx-detail p,
.sum-fixed .sum-fx .sum-fx-title,
.sum-fixed .sum-fx .sum-fx-desc {
    color: #fff;
}

/* CTA keeps the theme's btn-orange styling */
.sum-fixed .sum-fx .sum-fx-cta a {
    color: inherit;
}

.sum-fixed .sum-fx-title {
    margin: 0 0 26px;
    font-size: var(--sum-title-size, clamp(1.625rem, 4.1vw, 2.5rem));
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Description is clamped so a long entry cannot break the fixed height */
.sum-fixed .sum-fx-desc {
    margin: 0 0 44px;
    font-size: var(--sum-desc-size, clamp(1rem, 1.75vw, 1.0625rem));
    line-height: 2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sum-fixed .sum-fx-cta {
    margin: 0;
}

/* Single entry - let it run full width */
.sum-fixed .sum-fx:only-child {
    grid-column: 1 / -1;
}

/* Two or more cards side by side - copy fills the narrower card */
.sum-fixed .sum-fx:not(:only-child) {
    --sum-copy-w: 100%;
}

/* sum-h-auto: content decides height, cards still match via grid stretch */
.sum-h-auto .sum-fixed .sum-fx {
    height: auto;
    min-height: 0;
    align-items: stretch;
}

.sum-h-auto .sum-fixed .sum-fx-bg {
    position: static;
    height: auto !important;
    max-height: none;
}

.sum-h-auto .sum-fixed .sum-fx-detail {
    max-width: none;
}

.sum-h-auto .sum-fixed .sum-fx .sum-fx-detail,
.sum-h-auto .sum-fixed .sum-fx .sum-fx-detail p,
.sum-h-auto .sum-fixed .sum-fx .sum-fx-title,
.sum-h-auto .sum-fixed .sum-fx .sum-fx-desc {
    color: inherit;
}

.sum-h-auto .sum-fixed .sum-fx-title,
.sum-h-auto .sum-fixed .sum-fx-desc {
    display: block;
    overflow: visible;
}

@media (max-width: 767px) {
    .sum-fixed .sum-fx-detail {
        --sum-pad: 24px;
        --sum-pad-b: 32px;
        max-width: 100%;
    }

    .sum-fixed .sum-fx {
        align-items: flex-end;
    }

    /* Origin moves to the bottom centre in portrait */
    .sum-fixed .sum-fx::before {
        background: radial-gradient(
            ellipse 160% 95% at 50% 100%,
            rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.95)) 0%,
            rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.6)) 45%,
            rgba(0, 0, 0, calc(var(--sum-scrim, 0.88) * 0.2)) 75%,
            rgba(0, 0, 0, 0) 100%);
    }

    .sum-fixed .sum-fx-title {
        margin-bottom: 16px;
    }

    .sum-fixed .sum-fx-desc {
        margin-bottom: 28px;
        line-height: 1.7;
    }
}