/* ==========================================================================
   Markalar — loaded on every page only while the Markalar page is switched on
   (src/partials.mjs → head), so the site stays exactly as it was while it is off.
   The brand pages reuse the Tasarımcılar system (pages.css: .designers, .d-tile,
   .duo, .designer__*); this file only adds what brands have and designers do not.
   ========================================================================== */

/* ---- Menu: a fifth band (Ana sayfa · Koleksiyon · Tasarımcılar · Markalar · Hakkımızda) ---- */
.site-menu__bands--5 { grid-template-rows: var(--bar-h) 1fr 1fr 1fr 1fr 1fr .55fr; }
.site-menu__bands--5 .site-menu__band { transition-delay: calc((5 - var(--i)) * 50ms); }
.site-menu__bands--5 .site-menu__label { font-size: min(var(--fs-menu), 11svh); }
@media (max-width: 767.98px) {
  .site-menu__bands--5 { grid-template-rows: var(--bar-h) 1fr 1fr 1fr 1fr 1fr auto; }
  .site-menu__bands--5 .site-menu__label { font-size: min(var(--fs-menu), 10.5svh, 10vw); }
}

/* ---- Page colours: the Markalar band's pair ---- */
[data-page="brands"] { --head-bg: var(--c-yellow); --head-fg: var(--c-red); --foot-bg: var(--c-navy); --foot-fg: var(--c-pink); }

/* ---- Brand names as written (see src/pages/brands.mjs) ---- */
.b-tile .d-tile__name, .brand__name { text-transform: none; }

/* ---- Tiles: without a cover, the logo printed on the pair's light colour where a designer has a portrait
   (multiplied, like the duotone: dark ink stays, a white background takes the colour) ---- */
.b-logo {
  position: absolute; inset: 0 0 0 27%; display: grid; place-items: center; padding: 12%;
  background: var(--t-hi); isolation: isolate;
}
.b-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.b-tile .d-tile__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* ---- Brand page ---- */
.brand__cover { max-width: 1180px; margin: 0 auto clamp(28px, 4vw, 56px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-paper); }
.brand__cover img { width: 100%; height: 100%; object-fit: cover; }
.brand__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.brand__mark {
  position: relative; aspect-ratio: 1; overflow: hidden; container-type: inline-size;
  display: grid; place-items: center; padding: 14%;
  background: var(--c-paper); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}
.brand__mark:has(.duo--initials) { background: var(--t-bg); box-shadow: none; }
.brand__mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.brand__group + .brand__group { margin-top: clamp(40px, 5vw, 72px); }
.brand__group-title {
  max-width: 1180px; margin: 0 auto 20px; padding-bottom: 10px; border-bottom: 2px solid currentColor;
  font: 800 clamp(18px, 1vw + 12px, 24px)/1.1 var(--ff-display); font-stretch: var(--wdth-wide);
}
.brand__gallery { max-width: 1180px; margin-inline: auto; }
.brand__gallery .section-title { margin-bottom: 32px; }
.brand__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 0; list-style: none; }
.brand__photos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--c-paper); }

@media (max-width: 1024.98px) {
  .brand__grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .brand__photos { gap: 20px; }
}
@media (max-width: 767.98px) {
  .brand__cover { margin-inline: calc(var(--inset) * -1); }
  .brand__grid { grid-template-columns: 1fr; }
  .brand__mark { width: min(100%, 200px); }
  .brand__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}