/* =====================================================================
   Aviram Tzur - Version C, site-only additions.
   resources/c/b.css, c.css and c.js are byte-identical copies of the approved
   LAB reference (lab/b/b.css, lab/c/c.css, lab/c/c.js at commit d697b3a).
   This file holds only what the real site needs on top of them.
   ===================================================================== */

/* ---------- prose links (About: music website) ----------
   The design system's prose-link treatment (b.css .b-prose a) without its weight
   change, so the paragraph's typography stays as approved. */
.c-prose a { color: var(--amber-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.c-prose a:hover { color: var(--ink); }

/* ---------- English hero: a true mirror image of the Hebrew hero ----------
   Approved: in English the singer is on the LEFT facing RIGHT, toward the name, line
   and buttons on the RIGHT. The whole layered photo box (graphite field, cooled
   background and the masked original photograph) is mirrored as one unit, so the
   approved masking and blending stay exact. In LTR, c.css's logical rules already
   place the text block, the amber rule and the buttons on the right. */
@media (min-width: 901px) {
  :lang(en) .c-hero--left { background: linear-gradient(to left, #141516 0%, #191a1c 24%, #191a1c 100%); }
  /* Separation from the text: the photo box width follows the hero height, the English text
     follows the viewport width, so at tablet proportions the mirrored microphone would run into
     the name, line and buttons. The box is shifted left by exactly the amount that keeps the
     microphone arm (its innermost point, 76.6% of the mirrored box) 40px clear of the line's
     start; zero where there is already room. The shift is capped so the face (31.25% of the
     mirrored box) always stays at least 16px inside the left edge - the person is never cut.
     Values mirror c.css: hero height, photo box (105.5% of the hero, 1280/853), container edge,
     gutter and the line's font size. */
  :lang(en) .c-hero--left .c-hero__media { left: 0; right: auto;
    --en-photo-w: calc(clamp(560px, 82svh, 800px) * 1.055 * 1280 / 853);
    --en-line-start: calc(min(100vw, 50vw + 720px) - clamp(20px, 5vw, 80px) - 14.95 * clamp(1.35rem, 2.3vw, 2.25rem));
    transform: translateX(calc(-1 * min(max(0px, .766 * var(--en-photo-w) + 40px - var(--en-line-start)), max(0px, .3125 * var(--en-photo-w) - 16px)))) scaleX(-1); }
  :lang(en) .c-hero--left .c-hero__text { text-align: right; }
}
/* mobile keeps the approved structure (photo on top, centred text); only the photo is mirrored */
@media (max-width: 900px) {
  :lang(en) .c-hero--left .c-hero__media { transform: scaleX(-1); }
}
/* Tall, narrow tablets (901-1080px, the range where the header is already in its mobile form,
   with width/height <= 1.1): here the desktop composition cannot keep the mirrored microphone
   clear of the text without cutting the face, so the English hero uses the approved mobile hero
   composition - the c.css (max-width: 900px) hero rules, repeated unchanged - with the photo
   mirrored. Landscape tablets and desktops keep the desktop composition above. */
@media (min-width: 901px) and (max-width: 1080px) and (max-aspect-ratio: 11/10) {
  :lang(en) .c-hero { display: block; min-height: 0; }
  :lang(en) .c-hero__media { position: relative; width: 100%; height: min(50svh, 460px); }
  :lang(en) .c-hero__media img { object-position: 42% 16%; -webkit-mask-image: none; mask-image: none; }
  :lang(en) .c-hero__media::after { background:
    radial-gradient(70% 60% at 45% 32%, rgba(17, 18, 21, 0) 45%, rgba(17, 18, 21, .5) 100%),
    linear-gradient(180deg, rgba(17, 18, 21, .5) 0, rgba(17, 18, 21, 0) 20%, rgba(17, 18, 21, 0) 52%, var(--ink) 100%); }
  :lang(en) .c-hero__in { margin-top: -72px; padding-top: 0; padding-bottom: 36px; }
  :lang(en) .c-hero__text { width: auto; }
  :lang(en) .c-hero__name { font-size: clamp(2.7rem, 12.5vw, 4.6rem); }
  :lang(en) .c-hero__line { font-size: clamp(1.25rem, 5.4vw, 1.75rem); margin-top: 10px; }
  :lang(en) .c-hero__links { margin-top: 22px; gap: 8px; }
  :lang(en) .c-hero .b-chip { padding: 11px 18px; font-size: .975rem; }
  :lang(en) .c-hero--left { background: linear-gradient(to right, #141516 0%, #191a1c 24%, #191a1c 100%); }
  :lang(en) .c-hero--left .c-hero__media { position: relative; left: auto; right: auto; top: auto; width: 100%; height: min(52svh, 460px); aspect-ratio: auto; background: none; transform: scaleX(-1); }
  :lang(en) .c-hero--left .c-hero__media::before { content: none; }
  :lang(en) .c-hero--left .c-hero__media img { object-position: 72% 30%; -webkit-mask-image: none; mask-image: none; }
  :lang(en) .c-hero--left .c-hero__media::after { content: ''; background: linear-gradient(180deg, rgba(25, 26, 28, .5) 0, rgba(25, 26, 28, 0) 22%, rgba(25, 26, 28, 0) 55%, #191a1c 100%); }
  :lang(en) .c-hero--left .c-hero__text { width: auto; max-width: none; margin-inline: auto; text-align: center; }
  :lang(en) .c-hero--left .c-hero__line::before { margin-inline: auto; }
  :lang(en) .c-hero--left .c-hero__links { justify-content: center; }
}

/* The press links stay in the same physical corner of the Gali & Aviram photo
   (bottom-left) in both languages; the photograph is not mirrored. */
:lang(en) .c-press { inset-inline-end: auto; inset-inline-start: 14px; align-items: flex-start; }
@media (max-width: 900px) {
  :lang(en) .c-press { inset-inline-end: auto; inset-inline-start: 8px; }
}