/* Models list layout C — imports the product slider's stylesheet.
 *
 * The @import is the point of this file: the markup uses productslider's class
 * names, so the two stay identical by construction. Copying 255 lines would have
 * meant two files to keep in step, and they would drift the first time either
 * design moved. Relative to this stylesheet's own URL, so it survives the
 * ?v={mtime} cache stamp on the parent.
 *
 * Only the differences live below.
 */
@import url("../../productslider/layouts/sfh2026.css");

/* One brand ends with a carousel and the next opens with a 48px name, so 8px
   between them read as one block. Zeroed on the last so the section's own
   padding-bottom is not doubled. */
.cms2-mlc-brand { margin-bottom: clamp(40px, 6vw, 72px); }
.cms2-mlc-brand:last-child { margin-bottom: 0; }
/* 6px put the first category heading 4px under the brand name's ink (measured),
   i.e. touching -- a 48px "CHANNEL ISLANDS" and a 42px "FISH" read as one
   stacked title rather than a heading and its first section. Layout A keeps 44px
   of box spacing here; this restores the equivalent. */
.cms2-mlc-brand-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(18px, 2.2vw, 30px); }
.cms2-mlc-brand-logo { flex: none; max-height: 64px; max-width: 160px; object-fit: contain; }
.cms2-mlc-brand-name {
    margin: 0;
    /* See module.css: `min-width: 0` because a flex item will not shrink below
       its own content, and at 320px the brand name pushed the row past the
       viewport instead of wrapping. */
    min-width: 0;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
/* One carousel per category, so the section padding belongs to the block, not to
   each row -- productslider is one row per section and pays it once. */
.cms2-mlc { padding-block: clamp(32px, 5vw, 64px); }
.cms2-mlc-cat { margin-bottom: clamp(28px, 4vw, 52px); }
.cms2-mlc-cat:last-child { margin-bottom: 0; }
/* The category heading keeps layout A's accent underline (.cms2-ml-cat-name),
   which the switch to productslider's .sfh-heading-xl had dropped. Scoped to
   .cms2-mlc on purpose: .sfh-heading-xl belongs to productslider and this
   stylesheet IMPORTS that file, so an unscoped rule would draw a red line under
   every slider heading on the site. inline-block so the rule runs under the word
   and not across the column. */
.cms2-mlc .sfh-heading-xl {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cms2-accent, #111);
}
.cms2-mlc-cat-img { margin: 0; }
.cms2-mlc-cat-img img { max-height: 90px; object-fit: contain; }

/* Most models in this feed carry no photo at all (18 of 22 for Channel Islands,
   measured), so an empty panel is the common case rather than the exception.
   Same board outline the shop cards use: inline SVG in a data URI, no file and
   no request.
   The stroke colour was written `%2523d0d0d0` -- doubly encoded, so the browser
   decoded it to a literal `%23d0d0d0`, which is not a colour, and the outline
   never painted on any of the 18 empty panels. A data URI is decoded once, so
   `#` is `%23`. */
.cms2-mlc .sfh-product-media.no-img {
    /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%20110'%20fill='none'%20stroke='%23d0d0d0'%20stroke-width='2.4'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M20%203c8%2014%2013%2030%2013%2049%200%2022-5%2041-13%2055C12%2093%207%2074%207%2052%207%2033%2012%2017%2020%203z'/%3E%3Cpath%20d='M20%2014v76'/%3E%3Cpath%20d='M20%2084c3%202%205%206%205%2011'/%3E%3C/svg%3E"); */
    background-repeat: no-repeat; background-position: center; background-size: auto 52%;
}

@media (max-width: 640px) {
    .cms2-mlc-brand-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cms2-mlc-brand-logo { max-height: 48px; max-width: 140px; }
}