/**
 * ITXI Magento Sync — magazine catalog grid.
 *
 * Plain CSS (no build step in this plugin). Colors mirror the MMO brand
 * tokens used by the theme (_tokens.scss / _buttons.scss).
 */

/* Bare root ([data-itxi-magazine-catalog], see catalog.js) — no box model
   of its own. The hero and masthead band below render full-bleed edge to
   edge; .magazine-catalog__container is what actually constrains the
   grid/pagination content to the site's 1240px column. Previously the hero
   and masthead sat as children of a single max-width:1240px wrapper here,
   which made the hero read as a rounded, inset "card" instead of a
   full-width band (ANTOINE-2632). */

/* --- Hero: page-level intro, not category-specific — stays the same
   regardless of which subcategory catalog.js has filtered the grid to.
   The section itself is full-bleed (background at full viewport width);
   .magazine-catalog__hero-inner reuses .header-container's exact box
   model via the shared --mmo-column-max-width/--mmo-column-padding custom
   properties (defined in the theme's _base.scss, consumed here across the
   plain-CSS/SCSS boundary — ANTOINE-2636) instead of the homepage blocks'
   calc()-formula padding. The two aren't interchangeable here: the theme's
   global `* { box-sizing: border-box }` reset (_base.scss) makes a
   max-width+padding element's *content* sit at
   (100% - 1240px)/2 + 40px from the edge, while a bare padding formula
   with no max-width sits at (100% - 1240px)/2 + 0 — a flat 40px short of
   the header's own logo at any viewport width. Matching the header's box
   model exactly (not just its numbers) is what actually guarantees
   pixel-perfect alignment (ANTOINE-2632), and matching it via the same
   custom properties (rather than separately-copied numbers) is what keeps
   it that way as those numbers change (ANTOINE-2636).

   The 1320px fallbacks on the max-width declarations below are the same outer
   box the theme defines (1240px of content + the 40px padding on each side,
   see _base.scss) -- only used where the theme's property isn't present. Under
   the box-sizing reset above, that puts this content at (100% - 1240px)/2, the
   same edge the homepage blocks' own padding formula uses.

   The horizontal padding is --mmo-column-inset, not --mmo-column-padding: the
   homepage blocks are 100vw wide, so under a classic scrollbar their content
   box is a scrollbar-width wider than the column; the inset is the padding
   less half of that, which gives this content the same box (see _base.scss). --- */

.magazine-catalog__hero {
    background-color: #01327f; /* $mmo-hero-blue */
}

.magazine-catalog__hero-inner {
    max-width: var(--mmo-column-max-width, 1320px);
    margin: 0 auto;
    padding: 40px var(--mmo-column-inset, 40px);
}

.magazine-catalog__hero-eyebrow {
    /* Distinct from .magazine-catalog__eyebrow below (navy, for the
       masthead's category label) -- this one sits on the hero's navy
       background, so it uses the hero-rule's brand green instead. */
    margin: 0 0 8px;
    color: #94ca64;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.magazine-catalog__hero-title {
    margin: 0;
    max-width: 22ch;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.magazine-catalog__hero-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin: 16px 0 14px;
    border-radius: 2px;
    background-color: #94ca64;
}

.magazine-catalog__hero-desc {
    margin: 0;
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* --- Masthead band: which category/subcategory is showing right now,
   resolved server-side (see CatalogGrid::render()), plus the language
   filter dropdown (ANTOINE-2649: moved here from its own row above the
   grid, right-aligned opposite the category text) when language data
   exists to filter by.

   Full-bleed band using #ecf0f2 ($mmo-gray), the same token already used
   site-wide as the About/Brands section background — previously this had
   no background of its own and just showed through to the page's white
   (ANTOINE-2632). The old border-bottom divider is dropped since the
   band's own background-to-white edge does that job now.

   Same .header-container box model as .magazine-catalog__hero-inner
   above, via the same shared custom properties (ANTOINE-2636) — a
   calc()-formula padding with no max-width lands 40px short of the
   header's own logo under the theme's global box-sizing:border-box
   reset. --- */

.magazine-catalog__masthead-band {
    background-color: #ecf0f2; /* $mmo-gray */
}

.magazine-catalog__masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    max-width: var(--mmo-column-max-width, 1320px);
    margin: 0 auto;
    padding: 20px var(--mmo-column-inset, 40px) 24px;
}

.magazine-catalog__masthead-text {
    min-width: 0; /* lets a long category title wrap/truncate instead of forcing the filter button off the row */
}

.magazine-catalog__eyebrow {
    margin: 0 0 4px;
    color: #1b5191;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.magazine-catalog__category-title {
    margin: 0;
    min-height: 1.2em; /* holds its place before catalog.js fills it in */
    color: #1f4375;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* --- Container: the only element left constraining content to the site's
   column width (ANTOINE-2632) — wraps the grid, no-results message, and
   pagination. Same shared-custom-property box model as .header-container
   and .magazine-catalog__hero-inner/__masthead above (ANTOINE-2636), so
   the grid lines up with the header logo exactly instead of the 16px it
   was previously off by (this used to carry the old .magazine-catalog
   root's 24px uniform padding from before hero/masthead were split out
   into their own full-bleed sections). Vertical padding stays 24px —
   that's this container's own top/bottom rhythm, unrelated to the
   header's. --- */

.magazine-catalog__container {
    margin: 0 auto;
    max-width: var(--mmo-column-max-width, 1320px);
    padding: 24px var(--mmo-column-inset, 40px);
}

/* --- Mobile: no separate breakpoint override needed here anymore
   (ANTOINE-2636) — .header-container's own 768px override in the theme
   (_header.scss) redefines --mmo-column-padding to 24px on :root, and the
   three rules above already read that same custom property, so they pick
   up the narrower padding automatically instead of needing their own copy
   of the breakpoint + 24px value (which is exactly what let them drift out
   of sync with the header before, per ANTOINE-2632's history). --- */

/* --- Language filter: a dropdown (ANTOINE-2648, superseding the inline
   checkbox row from ANTOINE-2641 per client feedback -- "make it dropdown",
   referencing antoineonline.com's own Languages/Sort By controls). Native
   <details>/<summary> -- no JS -- with the panel absolutely positioned so
   it floats over the grid instead of pushing it down.

   Options are still derived from the catalog's own data (ANTOINE-2641,
   backed by ANTOINE-2644's Magento export field) rather than a hardcoded
   Arabic/French/English list -- CatalogGrid hides this control entirely
   via PHP when no item carries language data yet, so there's never an
   empty/inert dropdown shown before that rollout lands. --- */

.magazine-catalog__language-filter {
    position: relative;
    display: inline-block;
    /* No margin-bottom here (ANTOINE-2649) -- this now sits inline in the
       masthead's flex row rather than its own row above the grid; the
       masthead's own bottom padding provides the gap before the grid.

       margin-left: auto (peer-review fix) -- .magazine-catalog__masthead's
       justify-content: space-between only pushes this to the row's right
       edge while it shares a line with .magazine-catalog__masthead-text.
       Once flex-wrap puts this alone on its own wrapped line (narrow
       viewports, long category titles), space-between snaps a lone item to
       flex-start (left) instead, which also drags the right:0-anchored
       .magazine-catalog__language-panel left with it -- overflowing off the
       left edge of narrow screens. An auto margin claims the row's leftover
       space regardless of item count, so this stays pinned right (and the
       panel stays anchored safely on-screen) whether it's sharing the line
       or alone on it. */
    margin-left: auto;
}

.magazine-catalog__language-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(31, 67, 117, 0.18);
    border-radius: 10px;
    background-color: #ffffff;
    color: #1f4375;
    font-family: "Manrope", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* hide the default disclosure triangle (Firefox) */
    user-select: none;
}

.magazine-catalog__language-summary::-webkit-details-marker {
    display: none; /* hide the default disclosure triangle (Chrome/Safari) */
}

.magazine-catalog__language-dropdown[open] .magazine-catalog__language-summary {
    border-color: #1b5191;
    box-shadow: 0 0 0 3px rgba(27, 81, 145, 0.12);
}

.magazine-catalog__language-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #1b5191;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
}

.magazine-catalog__language-chevron {
    color: #85a4b5;
    transition: transform 0.15s ease;
}

.magazine-catalog__language-dropdown[open] .magazine-catalog__language-chevron {
    transform: rotate(180deg);
}

.magazine-catalog__language-panel {
    position: absolute;
    top: calc(100% + 8px);
    /* Right-aligned to the button (ANTOINE-2649: button now sits at the
       right edge of the masthead row) so the panel opens toward the
       column's interior instead of risking a right-edge overflow. */
    right: 0;
    z-index: 5;
    width: 220px;
    padding: 14px 16px;
    background-color: #ffffff;
    border: 1px solid rgba(31, 67, 117, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(4, 12, 26, 0.14);
}

.magazine-catalog__language-fieldset {
    /* Reset the browser's default fieldset border/margin/padding (ANTOINE-2653)
       -- this wraps the checkboxes purely for the accessible group label its
       screen-reader-text legend provides, not for any visual grouping. */
    margin: 0;
    padding: 0;
    border: 0;
}

.magazine-catalog__language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    color: #1f4375;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.magazine-catalog__language-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ecf0f2;
}

.magazine-catalog__language-clear {
    color: #85a4b5;
    font-family: "Manrope", sans-serif;
    font-size: 12.5px;
    text-decoration: underline;
}

.magazine-catalog__language-apply {
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background-color: #1b5191;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.magazine-catalog__language-apply:hover {
    opacity: 0.85;
}

/* --- Grid: 4 columns desktop, 2 tablet, 1 mobile --- */

.magazine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 600px) {
    .magazine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .magazine-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Card --- */

.magazine-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(31, 67, 117, 0.12); /* $mmo-navy at low opacity, same tint used in the card's own box-shadow below */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(31, 67, 117, 0.08);
}

/* No :hover rule here by design (ANTOINE-2618) -- no other flat element on
   this site (.mmo-hero, .mmo-btn, this card itself) lifts, deepens its
   shadow, or scales on hover; the rest-state border/shadow above stay
   static. */

/* Cover: the image scales to fit its own true aspect ratio inside a fixed
   3:4 tinted "mat" instead of being force-cropped to 3:4 — covers from
   different partners run all kinds of trims (a hors-série can be nearly
   square, a digest can be tall and narrow), and object-fit: cover was
   cropping the masthead off whichever ones didn't happen to be 3:4. */
.magazine-card__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7%;
    background-color: #ecf0f2;
    overflow: hidden;
}

.magazine-card__cover::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background-color: #1b5191;
    opacity: 0.35;
}

.magazine-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Broken cover (ANTOINE-3045): the <img>'s inline onerror hides it and adds
   the --placeholder modifier, which reveals a portrait "blank cover" panel
   (muted MMO mark + the magazine's name) in place of the browser's native
   broken-image icon and alt text. Inline onerror rather than catalog.js so
   it still fires if that file is late or blocked, and for images that fail
   before the script loads. */
.magazine-card__placeholder {
    display: none;
}

.magazine-card__cover--placeholder .magazine-card__image {
    /* .magazine-card__image's display: block beats the [hidden] attribute */
    display: none;
}

.magazine-card__cover--placeholder .magazine-card__placeholder {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    aspect-ratio: 3 / 4;
    padding: 12% 10% 12% 14%;
    border: 1px solid #c9d3dc;
    border-radius: 3px;
    /* darker strip on the left edge reads as the magazine's spine */
    background: linear-gradient(90deg, #d3dce4 0, #d3dce4 6%, #e0e7ed 6%);
    box-shadow: 0 2px 8px rgba(31, 67, 117, 0.12);
    text-align: center;
}

.magazine-card__cover--placeholder .magazine-card__placeholder::before {
    content: "";
    width: 52%;
    aspect-ratio: 446.79 / 142;
    background: url("../images/cover-placeholder.svg") center / contain no-repeat;
    opacity: 0.4;
}

.magazine-card__placeholder-title {
    color: #1f4375;
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0.75;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.magazine-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 18px;
}

.magazine-card__name {
    margin: 0;
    color: #1f4375;
    font-family: "Inter Tight", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.34;
    /* reserves two lines even for a one-line title, so every card's footer
       lands at the same height across a row in the common case. A longer
       title wraps onto as many lines as it needs and grows the card past
       this minimum rather than being clipped (ANTOINE-3046). */
    min-height: calc(1.34em * 2);
    /* a single unbreakable token (long SKU-style word) wraps instead of
       overflowing the card now that nothing clips it */
    overflow-wrap: anywhere;
}

/* CTA sits on the cover, bottom-right, anchored to the fixed-size cover
   slot rather than to the variable-height text below it — see the
   render_card() docblock. Sized up from the theme's default pill and
   given a drop shadow so it holds its own contrast over any cover art. */
.magazine-card__cta {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 999px;
    background-color: #94ca64;
    color: #16311c;
    font-family: "Manrope", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(4, 12, 26, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* No opacity here (ANTOINE-2666) -- unlike the site-wide .mmo-btn hover
   (_buttons.scss), which the same opacity: 0.85 pattern works fine for
   since those buttons usually sit on a plain or single-photo background,
   this button floats directly over busy, multi-color cover art. An
   opacity dip let the cover bleed through the button itself, reading as a
   glitch rather than a hover cue. A solid, one-step-darker fill (still
   just a color shift, no alpha) keeps the same felt interaction --
   darkens, lifts, deepens its shadow -- without ever going transparent. */
.magazine-card__cta:hover {
    background-color: #7fb84a;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(4, 12, 26, 0.34);
}

/* --- Pagination (populated by assets/js/catalog.js) --- */

.magazine-catalog__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.magazine-catalog__page {
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid #85a4b5;
    border-radius: 8px;
    background: #ffffff;
    color: #1f4375;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.magazine-catalog__page:hover {
    border-color: #1b5191;
}

.magazine-catalog__page.active {
    border-color: #1b5191;
    background-color: #1b5191;
    color: #ffffff;
}

.magazine-catalog__ellipsis {
    align-self: center;
    padding: 8px 4px;
    color: #85a4b5;
}

/* --- Empty / no-results states --- */

.magazine-catalog__empty,
.magazine-catalog__no-results {
    color: #1f4375;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    text-align: center;
}

/* .magazine-catalog__no-results already sits inside
   .magazine-catalog__container's max-width, but .magazine-catalog__empty
   renders directly under the unconstrained .magazine-catalog root (the
   "catalog unavailable" state never gets that far), so it needs its own
   width constraint to stay readable instead of spanning the full
   viewport (ANTOINE-2632). */
.magazine-catalog__empty {
    max-width: 640px;
    margin: 48px auto;
    padding: 0 32px;
}

.magazine-catalog__no-results {
    margin: 48px 0;
}