/* MY DUBAI — מגזין (/magazine/). נטען **רק** בעמודי המגזין (build.mjs: שדה css של העמוד).
   כל ערך מפנה לטוקן (tokens.css). הכותרות ב-var(--f-display): Bellefair בעברית ובאנגלית,
   IBM Plex Sans Arabic בערבית (components.css מחליף את הטוקן ב-html[lang="ar"]). */

/* ---------- פירורי לחם וראש הרכזת ---------- */
.mag-crumbs { margin-block-end: var(--s-6); }
.mag-mast { padding-block: var(--s-8) var(--s-7); border-block-end: 1px solid var(--c-gold); }
.mag-mast__title {
  font-family: var(--f-display); font-weight: 400; color: var(--c-ink);
  font-size: clamp(2.75rem, 1.5rem + 5.2vw, 5.75rem); line-height: 1; letter-spacing: -.01em;
  margin-block: var(--s-4) var(--s-5); text-wrap: balance; overflow-wrap: anywhere;
}
.mag-mast__lead { font-size: var(--fs-lg); color: var(--c-ink-2); max-width: 54ch; }

/* ---------- רשימת הכתבות ---------- */
.mag-hub { padding-block: var(--s-7) var(--section-y); }
.mag-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-8); }
.mag-list > li + li { border-block-start: var(--hairline); padding-block-start: var(--s-8); }
.mag-story { display: grid; gap: var(--s-5); align-items: center; }
.mag-story__media { display: block; }
.mag-story .figure { aspect-ratio: 3 / 2; min-height: 0; }
.mag-story .figure img { transition: transform var(--t-slow) var(--ease); }
.mag-story:hover .figure img { transform: scale(1.03); }
.mag-story__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--c-ink-3); }
.mag-story__title {
  font-family: var(--f-display); font-weight: 400; color: var(--c-ink);
  font-size: var(--fs-h3); line-height: var(--lh-head); margin-block: var(--s-3) var(--s-4); text-wrap: balance;
}
.mag-story--lead .mag-story__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.mag-story__title a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--c-gold), var(--c-gold)); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right bottom; transition: background-size var(--t-med) var(--ease);
}
[dir="ltr"] .mag-story__title a { background-position: left bottom; }
.mag-story__title a:hover, .mag-story__title a:focus-visible { background-size: 100% 1px; }
.mag-story__excerpt { color: var(--c-ink-2); max-width: 58ch; margin-block-end: var(--s-4); }
@media (min-width: 900px) {
  .mag-story { grid-template-columns: 5fr 4fr; gap: var(--s-7); }
  .mag-story--lead { grid-template-columns: 7fr 5fr; }
}

/* ---------- ראש הכתבה ---------- */
.mag-head { padding-block: var(--s-7) var(--s-6); }
.mag-head > * { max-width: 920px; }
.mag-head__title {
  font-family: var(--f-display); font-weight: 400; color: var(--c-ink);
  font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem); line-height: 1.06; letter-spacing: -.005em;
  margin-block: var(--s-4) var(--s-5); text-wrap: balance; overflow-wrap: anywhere;
}
.mag-dek { font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem); line-height: 1.55; color: var(--c-ink-2); max-width: 62ch; }
.mag-byline {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-6);
  padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-gold);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.mag-byline b { color: var(--c-ink); font-weight: 600; }
/* נקודת הפרדה רק כשהשורה רחבה — בנייד השורה נשברת, ונקודה בתחילת שורה נראית כטעות */
@media (min-width: 720px) { .mag-byline > span + span::before { content: "·"; margin-inline-end: var(--s-5); color: var(--c-gold); } }

.mag-hero { margin-block-end: var(--s-8); }
.mag-hero .figure { aspect-ratio: 16 / 9; min-height: 0; }
@media (max-width: 600px) { .mag-hero .figure { aspect-ratio: 4 / 3; } }

/* ---------- גוף הכתבה: מידה נוחה (~65 תווים) ---------- */
.mag-prose {
  max-width: 65ch; margin-inline: auto; color: var(--c-ink-2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.8; overflow-wrap: break-word;
}
.mag-prose > * + * { margin-block-start: var(--s-5); }
.mag-prose > p:first-child { font-size: 1.12em; color: var(--c-ink); }
.mag-prose .h2 {
  font-size: var(--fs-h3); color: var(--c-ink); margin-block-start: var(--s-8);
  padding-block-start: var(--s-5); border-block-start: var(--hairline);
}
.mag-prose a { color: var(--c-gold-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mag-prose b { color: var(--c-ink); font-weight: 600; }
.mag-prose ul { padding-inline-start: 1.25em; display: grid; gap: var(--s-3); }
.mag-prose ul li::marker { color: var(--c-gold); }
.mag-prose .tips { gap: var(--s-4); }
.mag-prose .tips li { grid-template-columns: 2.75rem 1fr; }

/* ציטוט מודגש (pull-quote) */
.mag-pull {
  margin: var(--s-8) 0; padding-block: var(--s-6); text-align: center;
  border-block: 1px solid var(--c-gold);
}
.mag-pull::before { content: "\201D"; display: block; font-family: var(--f-display); font-size: 3.5rem; line-height: .5; color: var(--c-gold); margin-block-end: var(--s-4); }
.mag-pull p {
  font-family: var(--f-display); color: var(--c-ink); text-wrap: balance;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.3; max-width: 30ch; margin-inline: auto;
}
html[lang="ar"] .mag-pull p { font-weight: 600; line-height: 1.55; }
/* ערבית: בלי ריווח שלילי (שובר חיבורי אותיות), משקל כמו .h1 בערבית, ושורה גבוהה לסימנים מעל ומתחת */
html[lang="ar"] .mag-mast__title, html[lang="ar"] .mag-head__title { letter-spacing: 0; font-weight: 700; line-height: 1.3; }
html[lang="ar"] .mag-story__title, html[lang="ar"] .mag-cta__title, html[lang="ar"] .mag-status dt, html[lang="ar"] .mag-related a { font-weight: 600; line-height: 1.4; }

/* מי טס עכשיו */
.mag-status { display: grid; gap: 0; border-block: 1px solid var(--c-line-strong); }
.mag-status > div { display: grid; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); }
.mag-status > div + div { border-block-start: var(--hairline); }
.mag-status dt { font-family: var(--f-display); font-size: var(--fs-h4); color: var(--c-ink); line-height: 1.2; }
.mag-status dd { margin: 0; }
@media (min-width: 640px) { .mag-status > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; } }

/* ---------- וואטסאפ ---------- */
.mag-cta { margin-block: var(--s-8); }
.mag-cta__box {
  background: var(--c-night); color: var(--c-sand); border-radius: var(--radius);
  padding: var(--s-7) clamp(var(--s-5), 4vw, var(--s-8)); display: grid; gap: var(--s-6); align-items: center;
}
.mag-cta__box .kicker { color: var(--c-dune); }
.mag-cta__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-head); color: #fff; margin-block: var(--s-3); }
.mag-cta__box p:not(.kicker) { color: #e6dccb; max-width: 56ch; }
.mag-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.mag-cta__actions .link { color: var(--c-sand); }
@media (min-width: 900px) { .mag-cta__box { grid-template-columns: 1fr auto; } }

/* ---------- עוד בנושא ---------- */
.mag-related { padding-block: 0 var(--section-y); }
.mag-related__h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-kicker); color: var(--c-gold-text); margin-block-end: var(--s-4); }
.mag-related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-block-start: 1px solid var(--c-gold); }
.mag-related li { border-block-end: var(--hairline); }
.mag-related a { display: block; padding: var(--s-4) 0; font-family: var(--f-display); font-size: var(--fs-h4); color: var(--c-ink); text-decoration: none; transition: color var(--t-fast); }
.mag-related a:hover { color: var(--c-gold-text); }
@media (min-width: 640px) { .mag-related li { padding-inline-end: var(--s-5); } }