/* ==========================================================================
   THE NEW JEWELLER — UAE — Site Stylesheet
   Design system for Elementor rebuild. See ELEMENTOR-GUIDE.md for mapping.

   Loaded by every page except index.html:

     top-stories.html    -> style.css
     Top_Stories/*.html  -> style.css + sm.css
     index.html          -> home.css        (its own layout, same tokens)

   The header, nav, footer and newsletter band are not here — they come from
   common.css, which all three sheets import. Do not restate a chrome rule in
   this file.

   DESKTOP ONLY — there are no media queries in this file.
   Everything below is the wide layout. The tablet and phone rules are in
   assets/tablet.css and assets/mobile.css; every page links
   assets/responsive.css after this sheet to pull them in.

   KNOWN OVERLAP WITH home.css
   The hero, magazine cover, video and web-banner sections below also exist in
   home.css, with different colours and fonts. No page loads both sheets, so
   the two copies cannot collide — but they do drift. If a section is only
   ever used on the home page, delete it here rather than editing both.

   ---------------------------------------------------------------------------
   FONTS — read before changing --font-display / --font-body / --font-meta
   ---------------------------------------------------------------------------
   The families below only render if the page has actually linked them. Every
   page head carries the same block, marked "FONTS: keep this block identical
   on every page":

     Playfair Display  700, 800        -> headings (--font-display)
     Source Sans Pro   400,600,700,900 -> everything else (--font-body/-meta)

   900 is linked because several rules ask for weight 800 and Source Sans Pro
   has no 800 face; without it the browser would synthesise a fake bold.

   Change a family here and you must change that <link> on every page, and the
   matching --font / --font-head in home.css, or pages will silently disagree
   again — which is exactly what happened before: this file asked for Source
   Sans Pro while top-stories.html only linked Noto, so its body text fell
   back to Arial.
   ========================================================================== */

@import url("color.css");
@import url("common.css");

:root {
  /* Type */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-meta: "Source Sans Pro", Arial, sans-serif;

  --container: 1500px;

  /* One web-banner slot. The creatives are 160x200, so the grid columns and
     the images are both sized from this. */
  --banner-slot: 160px;

  /* The playlist rail beside the video player. The player takes whatever
     width is left over, so widening this narrows the player. */
  --playlist-w: 360px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  text-align: justify;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

/* -------------------- Facet marker (signature element) --------------------
   A small clipped-corner tag used on eyebrows/labels throughout the site —
   a quiet nod to a cut gem facet. This is the one recurring flourish. */
.facet {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--gold);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
  margin-right: 8px;
  position: relative;
  top: 1px;
}

.eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
}

/* -------------------- Hero: magazine + editor's note -------------------- */
.hero {
  padding: 25px 0;
  border-bottom: 1px solid var(--hairline);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  /* Centred, not top-aligned: the magazine cover is a tall 3:4 card and the
     Editor's Note is shorter, so aligning both to the top left a block of empty
     space under the note. Centring shares that difference above and below it,
     which reads as a deliberate pairing instead of a gap. */
  align-items: center;
}

.magazine-card {
  text-align: center;
}

.magazine-cover {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--olive) 0%, var(--color-cover-deep) 55%, var(--olive-deep) 100%);
  border-radius: 2px;
  box-shadow: 0 18px 40px -14px var(--color-blue-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 24px;
  position: relative;
  border: 1px solid var(--color-cover-border);
}

.magazine-cover::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-gold-overlay);
}

.magazine-cover .mc-eyebrow {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.magazine-cover img {
  width: 100%;
  margin: 8px 0;
  border-radius: 1px;
}

.magazine-cover .mc-issue {
  font-family: var(--font-meta);
  font-size: 12px;
  margin-top: auto;
  letter-spacing: 1px;
  color: var(--color-cover-text);
}

.magazine-card .mc-cta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--olive);
  border-bottom: 1px solid var(--olive);
  padding-bottom: 2px;
}

.editors-note .eyebrow {
  margin-bottom: 14px;
}

.editors-note h2 {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.editors-note .drop {
  font-family: var(--font-display);
  float: left;
  font-size: 56px;
  line-height: 0.8;
  padding: 4px 8px 0 0;
  color: var(--olive);
}

.editors-note p {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0 0 14px;
}

.editors-note .read-more {
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--olive);
  border-bottom: 1px solid var(--olive);
  padding-bottom: 2px;
}

/* ==========================================================================
   VIDEO SECTION
   The player on the left, its playlist and the Previous / Next controls on the
   right. Two columns on desktop, stacked into one below 980px.

   The playlist rail has a fixed width (--playlist-w) and the player takes
   whatever is left, so the player is as large as the space allows at every
   screen size.
   ========================================================================== */
.video-section {
  padding: 25px 0;
  background: var(--paper);
}

.video-row {
  display: grid;
  /* minmax(0,1fr) — not plain 1fr — or the player refuses to shrink */
  grid-template-columns: minmax(0, 1fr) var(--playlist-w);
  gap: 35px;
  align-items: start;
}

/* -------------------- The player --------------------
   Note what the YouTube API does to this element: YT.Player REPLACES the empty
   <div id="youtube-player"> with an <iframe id="youtube-player" width="640"
   height="360">. So two things follow:

     - height:auto is needed. Those width/height attributes count as a specified
       height, which wins over aspect-ratio — the player would sit at a flat
       360px tall at every width and YouTube would letterbox the picture inside
       it. Setting height:auto here puts aspect-ratio back in charge.
     - there is no "#youtube-player iframe" to style. The iframe is not inside
       this element, it IS this element, so the rules below apply to it directly. */
.video-box {
  width: 100%;
  overflow: hidden;
}

#youtube-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* keeps its shape at every width */
  background: var(--color-black);
  border: 0;
}

/* -------------------- The playlist rail -------------------------------------
   The list of titles, with the controls under it. It sits beside the player on
   desktop and under it on narrow screens.

   The list is a window onto the titles, moved by the Previous / Next buttons
   only — hence overflow:hidden rather than auto. js/video-player.js nudges
   scrollTop so the playing title is always in view.

   Its height comes from two places:

     - BESIDE THE PLAYER, js/video-player.js measures the video column and sets
       the height, so the two columns end at exactly the same point with no gap
       under the buttons. The player is 16:9, so its height changes with the
       window and CSS cannot express "as tall as my sibling".
     - STACKED under the player there is nothing to line up with, so the script
       stands down and --video-list-h below is the cap instead. It is a MAXIMUM:
       with a handful of videos the box is only as tall as the titles it holds,
       and the button scrolling only comes into play once the list outgrows it.
       Change it to show more or fewer titles at once.

   Note: no scroll-behavior:smooth here on purpose. The script decides where to
   scroll by reading how far the list is scrolled right now; while a smooth
   animation is still running that reading is a mid-flight value, so two quick
   presses of Next would compute the wrong destination and the playing title
   could end up out of view. Jumping straight to the position is exact. */
.video-list {
  --video-list-h: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: var(--video-list-h);
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}

.video-item {
  /* grow 1, shrink 0: when the panel is taller than the titles they share the
     spare height between them, so the list fills its column instead of leaving
     a blank strip above the buttons. Once there are more titles than fit they
     keep their natural height and the window scrolls instead. */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  transition: background .2s, color .2s;
}

.video-item:hover {
  background: var(--paper-tint);
}

.video-item:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: -2px;
}

.video-item.active {
  background: var(--paper-tint);
  color: var(--olive);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* -------------------- Previous / Next + the position counter -------------- */
.video-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.video-navigation button {
  border: none;
  background: var(--olive);
  color: var(--color-white);
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 2px;
}

.video-navigation button:hover {
  background: var(--color-cover-deep);
}

/* No :disabled state — the playlist loops, so neither button is ever a dead end */
.video-count {
  font-family: var(--font-meta);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ==========================================================================
   WEB BANNER SECTION
   Its own full-width section below the video. With the whole page width to
   itself, the four slots sit in one centred row, dropping to 2-up and then
   1-up as the screen narrows.

   If you change the slot size, change --banner-slot in the tokens at the top
   and the images follow.
   ========================================================================== */
.banner-section {
  padding: 25px 0;
  background: var(--paper);
}

.web-banners {
  display: grid;
  grid-template-columns: repeat(6, var(--banner-slot));
  gap: 15px;
  justify-content: center;
}

.web-banners img {
  width: var(--banner-slot);
  height: calc(var(--banner-slot) * 1.25);
  /* the creatives are 160x200 */
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   ARCHIVE / CATEGORY PAGES
   ========================================================================== */

/* Simple card grid used on category archive pages */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}

.card .cat-tag {
  font-family: var(--font-meta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}

.card h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 8px 0 8px;
}

.card h3 a:hover {
  color: var(--them-active);
}

.card p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}

.card .meta {
  font-size: 12px;
  color: var(--color-ink-faint);
  margin-top: 10px;
  font-family: var(--font-meta);
}

/* Page header used on interior/category pages */
.page-header {
  background: var(--them-color);
  padding: 10px 0;
}

.page-header .wrap {
  /* flex, so the align-items/gap below mean anything: the title and its
     standfirst sit on one baseline-aligned row. */
  display: inherit;
  align-items: baseline;
  gap: 16px;
}

.page-header h1 {
  color: var(--them-text);
  font-size: 32px;
}

.page-header p {
  color: var(--color-white);
  font-family: var(--font-meta);
  font-size: 14px;
  margin: 0;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  font-family: var(--font-meta);
  font-size: 14px;
}

.pagination a.active,
.pagination a:hover {
  background: var(--them-active);
  color: var(--color-white);
  border-color: var(--olive);
}

/* ==========================================================================
   CONTENT COMPONENTS
   These replace the inline style="..." attributes that used to be repeated
   across the pages. Use the classes below instead of writing inline styles.
   ========================================================================== */

/* -------------------- Prose (policy & static page body text) --------------
   Put class="prose" on the container that holds the body copy. Every <p>
   and <li> inside then gets the standard reading style automatically —
   no need to style paragraphs one by one. */
.prose {
  overflow-wrap: break-word;
}

.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink);
}

.prose h2,
.prose h3,
.prose h4 {
  margin: 26px 0 10px;
}

.prose a {
  color: var(--olive);
  border-bottom: 1px solid var(--hairline);
}

.prose a:hover {
  border-bottom-color: var(--olive);
}

/* Slightly smaller variant, for the placeholder policy pages */
.prose.prose-sm p,
.prose.prose-sm li {
  font-size: 16px;
  margin-bottom: 16px;
}

/* Narrower reading column — pair with .wrap, e.g. <div class="wrap narrow"> */
.wrap.narrow {
  max-width: 820px;
}

/* -------------------- Media inside body copy --------------------
   For images in an article or a policy page. Use these instead of width/height
   attributes or an inline style, so every article's pictures behave the same.

   .media           fills the text column, centred
   .w-600 / .w-700  optional cap on how large it may grow
   Works on an <img> and on a wrapping <div>/<figure>. */
.media {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 18px;
}

.w-600 {
  max-width: 600px;
}

.w-700 {
  max-width: 700px;
}

/* A single centred image, keeping whatever size it already has.
   (This replaces the old <center> tag, which is obsolete.) */
.img-center {
  text-align: center;
  margin: 0 0 18px;
}

.img-center img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Captions */
.img-caption {
  display: block;
  font-family: var(--font-meta);
  font-size: 12px;
  color: var(--color-ink-muted);
  font-style: italic;
  text-align: center;
  margin: 0 0 18px;
}

.article-figure {
  margin: 0 auto 18px;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--color-ink-soft);
  font-style: italic;
}

/* Map embed — the wrapper sets the height, the iframe fills it */
.map-embed {
  height: 350px;
}

.map-iframe {
  height: 100%;
  width: 100%;
}

/* -------------------- Contact page -------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
  padding: 25px 42px;
}

.contact-form h3 {
  font-size: 22px;
  margin-bottom: 18px;
}

.contact-form label {
  display: block;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 6px;
}

.contact-form .field {
  margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  border-radius: 2px;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form button {
  background: var(--them-active);
  color: var(--color-white);
  border: none;
  padding: 12px 28px;
  font-family: var(--font-meta);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
}

.contact-form button:hover {
  background: var(--them-color);
}

.contact-info {
  width: 100%;
  padding: 20px 0px;
}

.contact-info h3 {
  font-size: 22px;
  margin-bottom: 18px;
}

.contact-info .info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 0;
}

.contact-info .info-row .label {
  flex: 0 0 110px;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.contact-info .info-row .value {
  color: var(--ink-soft);
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   RESPONSIVE — not here.
   Every width change these pages make — the one-column article and card
   grids, the stacked hero and video row, the narrowing banner strip, the
   phone type sizes — is in assets/tablet.css and assets/mobile.css, pulled
   in by assets/responsive.css. Add a width change there, not back into this
   file.

   Note for anything shared with home.css: both sheets style .hero,
   .magazine-card, .video-* and .web-banners, and no page loads both. Rules in
   tablet.css / mobile.css that differ between the two are scoped through a
   parent only one page has — this sheet's are under `.hero .wrap`.
   ========================================================================== */