@import url("color.css");

/* ==========================================================================
   THE NEW JEWELLER UAE — SINGLE ARTICLE PAGE LAYOUT
   Loaded only by the article pages, on top of style.css:

     <link rel="stylesheet" href="../assets/style.css">
     <link rel="stylesheet" href="../assets/sm.css">

   What is in here: the two-column article shell (820px of body copy + a 320px
   "Read Next" rail), the byline row, and the share buttons.

   Everything else an article uses — the .prose body text, the image classes
   (.media, .img-center, .article-figure, …), the header and footer — comes
   from style.css and common.css, so it stays identical to the rest of the
   site. That is also why the type tokens used below (--font-meta,
   --font-display) are not declared here: style.css owns them, and this sheet
   is never loaded without it.
   ========================================================================== */

/* -------------------- ARTICLE + READ NEXT SHELL -------------------- */
.article-layout {
  width: min(100%, 1185px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 820px) 320px;
  gap: 45px;
  justify-content: center;
  align-items: start;
}

/* min-width:0 lets a long word or a wide image shrink instead of pushing the
   Read Next rail off the side of the page. */
.article-main { min-width: 0; }

/* The section label above the headline. style.css styles .cat-tag per context
   (.card, .featured-article, .story-list), so the article page needs its own
   rule — same gold uppercase treatment, one size up. */
.article-main .cat-tag {
  display: block;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.article-main h1 {
  font-size: clamp(26px, 3.4vw, 32px);
  line-height: 1.2;
  margin: 0;
}

/* -------------------- BYLINE ROW --------------------
   Source and date on the left, share buttons on the right. */
.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0;
  gap: 20px;
  padding-bottom: 20px;
}
.article-info {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-meta);
  font-size: 15px;
  color: var(--ink-soft);
}
.article-info strong {
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--olive);
}

/* -------------------- SHARE BUTTONS --------------------
   The markup is written by partials/article-share.js — there is nothing to
   fill in per article. Each button holds an inline SVG and no text, so the
   circle only needs sizing and centring. */
.article-share { display: flex; align-items: center; gap: 12px; }
.article-share a {
  width: 62px;
  height: 62px;
  border: 1px solid var(--color-line-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: background .3s, border-color .3s, color .3s;
}
.article-share a:hover {
  background: var(--them-active);
  border-color: var(--olive);
  color: var(--them-text);
}
.article-share svg { width: 19px; height: 19px; }

/* -------------------- READ NEXT RAIL --------------------
   Written by partials/read-next.js, which builds the list from the matching
   section on the home page. Markup it emits:

     <aside class="read-next">
       <div class="read-next__sticky">
         <h2>Read Next</h2>
         <a>…</a> <a>…</a> …
       </div>
     </aside>

   Styled to match the home-page sidebar that partials/rail.js fills, so the
   two rails read as the same component: a bordered card (.block), a rule-under
   heading with a brand bar (.block__title) and numbered rows (.rank).
   The numbers come from a CSS counter — read-next.js emits bare <a> tags, not
   an <ol>, so they cannot come from list markers. */
.read-next {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  /* .article-layout sets align-items:start, which shrinks this column to its
     own content. Sticky can only travel inside its containing block, so
     without stretching back to the full row height it would never move. */
  align-self: stretch;
}

.read-next__sticky {
  position: sticky;
  /* clear the sticky .primary-nav, then a little breathing room — the same
     offset home.css gives its .rail__sticky. --chrome-nav-h comes from
     common.css via style.css; the fallback covers loading this sheet alone. */
  top: calc(var(--chrome-nav-h, 48px) + 16px);
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  counter-reset: read-next;
}

.read-next h2 {
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 10px 12px;
  border-bottom: 2px solid var(--hairline);
  font-size: 19px;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* the brand bar down the left of the heading — stops above the rule */
.read-next h2::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 12px;
  left: 0;
  width: 4px;
  background: var(--brand);
  border-radius: 2px;
}

.read-next a {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  transition: color .2s;
}
.read-next a::before {
  counter-increment: read-next;
  content: counter(read-next);
  flex: none;
  width: 26px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--them-active);
  opacity: .55;
}
.read-next a:last-child { border-bottom: 0; padding-bottom: 0; }
.read-next a:hover { color: var(--them-active); }

/* -------------------- RESPONSIVE — not here --------------------
   The article shell's tablet and phone rules (Read Next dropping below the
   article, the stacked byline row, the larger share buttons) are in
   assets/tablet.css and assets/mobile.css. The article pages link
   assets/responsive.css after this sheet to pull them in. */