/**
 * Merch product template — layout + marketing-block styling.
 *
 * Loaded only when the resolved product template is `merch`
 * (ProductTemplate\Module::enqueueAssets). Depends on product-template.css for
 * the shared .nf-pdp scaffolding; this file only adds merch-specific pieces:
 * the collection intro banner and the "Wear your philosophy" area.
 */

/* -------------------------------------------------------------------------
 * Hero add-to-cart
 * ---------------------------------------------------------------------- */
/* Cap the merch add-to-cart width to match the main template's ATC
 * (.nf-atc2 = max-width:500px, centered in its hero column). The merch ATC
 * widget (.nf-atc.nf-atc-merch) has no width cap of its own, so without this
 * it stretches to the full hero-atc column. Scoped to .nf-pdp--merch so
 * Elementor merch pages keep their own layout. */
.nf-pdp--merch .nf-atc.nf-atc-merch {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Collection intro banner
 * Mirrors the live Elementor block: a large #WeAreNature wordmark, a green
 * "Collection" badge above the brand line, a black headline band and body copy
 * on the left, with the collection photo on the right over a light left-to-right
 * gradient (white -> #EEEEEE, matching the Elementor section).
 * ---------------------------------------------------------------------- */
/* Full-bleed section: the gradient band breaks out of the .nf-pdp max-width box
   to span the viewport edge-to-edge, and sits flush (no top gap) against the
   green badges band above it. Same full-bleed technique as the shared badges /
   guarantee bands; html,body overflow-x:clip (product-template.css) absorbs the
   100vw so it never adds a horizontal scrollbar. */
.nf-pdp .nf-pdp__section--merch-intro {
    width: 100vw;
    max-width: none;
    margin-top: 0;
    margin-inline: calc(50% - 50vw);
    background: linear-gradient(90deg, #ffffff 0%, #eeeeee 21%);
}

/* Inner content stays aligned to the page width / gutter. No bottom padding so
   the model photo can sit flush against the band's bottom edge (see media). */
.nf-pdp__merch-intro {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    max-width: var(--nf-pdp-max);
    margin-inline: auto;
    padding: 1.5rem var(--nf-pdp-gutter) 0;
}

.nf-pdp__merch-intro-text {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Extra left inset so the copy/wordmark don't sit hard against the band edge. */
    padding-left: clamp(1rem, 4vw, 4rem);
    /* Keep text clear of the bottom edge even though the container has no
       bottom padding (that space is reserved for the flush photo). */
    padding-bottom: 1.5rem;
}

/* .nf-pdp-scoped + !important to beat the theme/Elementor `img { max-width: 100% }`
   rule that otherwise lets the wordmark stretch to the full column width. */
.nf-pdp .nf-pdp__merch-intro-wordmark {
    width: 100%;
    max-width: 600px !important;
    height: auto;
    margin: 0 0 1.25rem;
}

.nf-pdp__merch-intro-eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.nf-pdp__merch-intro-badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    background: #35ac5a;
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

.nf-pdp__merch-intro-brand {
    font-size: clamp(1.1rem, 2vw, 1.3125rem);
    color: #000000;
}

.nf-pdp__merch-intro-headingband {
    align-self: stretch;
    margin: 0 0 1.25rem;
    padding: 0.6rem 1rem;
    background: #000000;
}

/* Tag-qualified + .nf-pdp-scoped to beat the theme's default heading color
   (same pattern the shared PDP uses for guarantee / #WeAreNature headings). */
.nf-pdp .nf-pdp__merch-intro-headingband h2.nf-pdp__merch-intro-heading {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.3rem, 2.4vw, 1.875rem);
    font-weight: 500;
    line-height: 1.2;
}

.nf-pdp__merch-intro-body {
    max-width: 46ch;
    margin: 0;
    color: #000000;
    font-size: clamp(1rem, 1.6vw, 1.3125rem);
    line-height: 1.5;
}

/* Photo column: shrinks to the (already trimmed) photo's width so there's no dead
   space between the text and the models, and is bottom-aligned so they always rise
   from the band's bottom edge (never cropped mid-leg). */
.nf-pdp__merch-intro-media {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.nf-pdp__merch-intro-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* The source PNG is pre-trimmed of transparent margins, so we size by HEIGHT:
       this keeps the models large while controlling the band height, and the
       photo column is only as wide as the image (no gap to the text). */
    max-height: 34rem;
    /* Flush with the band bottom (the container has no bottom padding). */
    vertical-align: bottom;
}

@media (max-width: 782px) {
    .nf-pdp__merch-intro {
        flex-direction: column;
    }

    .nf-pdp__merch-intro-body {
        max-width: 100%;
    }

    .nf-pdp__merch-intro-media {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
 * "Wear your philosophy" area
 * ---------------------------------------------------------------------- */
.nf-pdp__merch-philosophy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Intro: video on the left, copy on the right (mirrors the live Elementor row). */
.nf-pdp__merch-philosophy-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.nf-pdp__merch-philosophy-video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 30rem;
    object-fit: cover;
    border-radius: 16px;
    background: #f2f2f2;
}

.nf-pdp__merch-philosophy-intro-text {
    text-align: left;
}

/* Two-weight heading ("Nosi Svojo" thin over "Filozofijo" bold) with a short
   green underline accent, matching the Elementor design. */
.nf-pdp__merch-philosophy-heading {
    position: relative;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.nf-pdp__merch-philosophy-heading-thin {
    display: block;
    font-weight: 300;
}

.nf-pdp__merch-philosophy-heading-strong {
    display: block;
    font-weight: 800;
}

.nf-pdp__merch-philosophy-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.5rem;
    height: 3px;
    background: #35ac5a;
}

.nf-pdp__merch-philosophy-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Quote/callout box: light grey fill with a green left border. */
.nf-pdp__merch-philosophy-note {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: #f2f2f2;
    border-left: 4px solid #35ac5a;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
}

.nf-pdp__merch-philosophy-body {
    margin: 0;
    line-height: 1.6;
}

/* "Natural. Proven. Effective." — full-bleed green-leaves band (shorter, controlled
   height via min-height + cover). The heading + subtitle stay centered between the
   baked frame's side lines; the body copy sits just below and may spill past the
   frame. Height stays compact regardless of viewport width. */
.nf-pdp .nf-pdp__merch-philosophy-standard {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    min-height: clamp(20rem, 30vw, 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    /* Horizontal inset keeps the heading within the frame's side lines (~17%). */
    padding-block: clamp(2rem, 5vh, 3.5rem);
    padding-inline: clamp(1.5rem, 17%, 20rem);
    color: #ffffff;
    text-align: center;
    background: #10361f url("../../../images/merch-philosophy/standard-leaves.webp") center / cover no-repeat;
}

.nf-pdp .nf-pdp__merch-philosophy-standard-heading {
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-weight: 800;
    /* !important on BOTH size and line-height defeats Elementor's global kit heading
       typography — without forcing line-height, the kit's small value makes the
       stacked word-lines overlap at large sizes. */
    font-size: clamp(2.25rem, 5.5vw, 3.25rem) !important;
    line-height: 1.1 !important;
}

.nf-pdp__merch-philosophy-standard-heading-line {
    display: block;
}

/* Subtitle: bold and a step down from the heading, but clearly bigger than body. */
.nf-pdp .nf-pdp__merch-philosophy-standard-subtitle {
    margin: 0;
    color: #ffffff;
    font-style: normal;
    opacity: 1;
    font-weight: 700;
    font-size: clamp(1.375rem, 3vw, 1.625rem);
}

/* Body sits inside the band (white), just under the heading/subtitle; it may spill
   past the baked frame — that's fine. */
.nf-pdp .nf-pdp__merch-philosophy-standard-body {
    max-width: 60ch;
    margin: 0;
    color: #ffffff;
    text-align: center;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.6;
}

.nf-pdp__merch-philosophy-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    /* Top-align the cells so the icons line up even when one column's body wraps
       to more lines than the other. */
    align-items: start;
}

.nf-pdp__merch-philosophy-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 1rem;
    text-align: center;
}

/* Icon-box icon (trophy / star), thin black line art like the Elementor widget. */
.nf-pdp__merch-philosophy-value-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 0.5rem;
    object-fit: contain;
}

.nf-pdp__merch-philosophy-value-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.nf-pdp__merch-philosophy-value-body {
    margin: 0;
    line-height: 1.5;
}

.nf-pdp__merch-philosophy-collection,
.nf-pdp__merch-philosophy-lifestyle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

/* Collection statement sits on a FULL-BLEED light-grey band (Elementor container
   bg #F0F0F0) that spans the viewport edge-to-edge. The photo fills the right half
   flush to the band's top/right/bottom edges (no grey padding around it); the copy
   stays aligned to the page content gutter on the left. Same 100vw + negative
   margin-inline technique as the collection intro / shared bands. */
.nf-pdp .nf-pdp__merch-philosophy-collection {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    gap: 0;
    align-items: stretch;
    /* Taller band on tablet/desktop (~1200px+) so the copy has generous breathing
       room; still scales down gracefully on narrower viewports. */
    min-height: clamp(22rem, 32vw, 28rem);
    padding: 0;
    background: #f0f0f0;
    overflow: hidden;
}

.nf-pdp__merch-philosophy-collection-text {
    align-self: center;
    /* Line the copy up with the page content on the left via MARGIN so the green
       accent border sits right next to the text (not out at the viewport edge). */
    margin-inline-start: max(var(--nf-pdp-gutter), calc((100vw - var(--nf-pdp-max)) / 2 + var(--nf-pdp-gutter)));
    padding-block: clamp(1.25rem, 3vw, 2.25rem);
    padding-inline-end: clamp(1.5rem, 4vw, 3rem);
    padding-inline-start: 1.25rem;
    border-inline-start: 3px solid #35ac5a;
}

/* Bigger opening line, then a smaller note whose second half is bold — matching
   the Elementor text-editor styling. */
.nf-pdp__merch-philosophy-collection-lead {
    margin: 0 0 1.25rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.4;
    color: #1a1a1a;
}

.nf-pdp__merch-philosophy-collection-note {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333333;
}

.nf-pdp__merch-philosophy-collection-note strong {
    font-weight: 700;
}

/* Collection photo bleeds to the band edges (fills its half, no radius).
   The image is taken out of flow (absolute fill) so its intrinsic height can't
   stretch the grid row past the band's min-height — the band height is driven by
   the copy column + min-height, and the photo just covers whatever that is. */
.nf-pdp .nf-pdp__merch-philosophy-collection-media {
    position: relative;
    overflow: hidden;
}

.nf-pdp .nf-pdp__merch-philosophy-collection-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Lifestyle photo keeps the rounded contained look. */
.nf-pdp__merch-philosophy-lifestyle-media img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Heading: "Narava v" (regular) over a bold "Vsakem trenutku", ~30px black —
   matching the Elementor text-editor. !important defeats the global kit h3
   typography (same reason as the leaves-band heading). */
.nf-pdp .nf-pdp__merch-philosophy-lifestyle-heading {
    margin: 0 0 1rem;
    color: #000000;
    line-height: 1.2;
    font-weight: 400 !important;
    font-size: clamp(1.5rem, 3.2vw, 1.875rem) !important;
}

.nf-pdp .nf-pdp__merch-philosophy-lifestyle-heading strong {
    font-weight: 700 !important;
}

.nf-pdp__merch-philosophy-lifestyle-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.nf-pdp__merch-philosophy-lifestyle-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* Leaf marker (LOGO-01-1_listek.svg) replaces a generic bullet/checkmark. */
.nf-pdp__merch-philosophy-lifestyle-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 0.2rem;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 782px) {
    .nf-pdp__merch-intro,
    .nf-pdp__merch-philosophy-intro,
    .nf-pdp__merch-philosophy-values,
    .nf-pdp__merch-philosophy-collection,
    .nf-pdp__merch-philosophy-lifestyle {
        grid-template-columns: 1fr;
    }

    .nf-pdp__merch-philosophy-lifestyle-media {
        order: -1;
    }

    /* Leaves band on phones: shorter, with a narrower inset so the (larger) heading
       has room to sit on its own lines. */
    .nf-pdp .nf-pdp__merch-philosophy-standard {
        min-height: 20rem;
        padding-inline: 8%;
        padding-block: clamp(2.5rem, 8vh, 3.5rem);
    }

    /* Stacked full-bleed collection band: copy first, photo below at natural
       height (no forced band height, gutter-aligned padding). */
    .nf-pdp .nf-pdp__merch-philosophy-collection {
        min-height: 0;
    }

    .nf-pdp__merch-philosophy-collection-text {
        padding-inline: var(--nf-pdp-gutter);
        padding-block: clamp(1.5rem, 6vw, 2.5rem);
    }

    /* Back in flow when stacked: natural height under the copy. */
    .nf-pdp .nf-pdp__merch-philosophy-collection-media img {
        position: static;
        inset: auto;
        height: auto;
        max-height: 60vh;
    }
}