/* =====================================================================
   Editorial pages: /news, /prices, /events and one article.

   All three lists share .ed-*; events add .ev-* for the date block and
   an article adds .art-*. Tokens come from mesteel.css.
   ===================================================================== */

.ed-wrap{padding-top:32px;padding-bottom:64px;display:flex;flex-direction:column;gap:20px}
/* The hero already carries the heading and its own bottom fade, so the
   page below it starts closer than it would on its own. */
.ed-hero + .ed-wrap,.ed-hero + .wrap{padding-top:18px}
.ed-hero + .ed-wrap .ed-head:empty{display:none}

/* ---------- Page head ---------- */
.ed-head .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ed-head h1{font-size:34px;letter-spacing:-.02em;margin-top:4px}
.ed-head .sub{margin:8px 0 0;font-size:15px;line-height:1.6;color:#475569;max-width:66ch}

.ed-search{display:flex;gap:8px;margin-top:16px;max-width:560px}
.ed-search input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:999px;
                 padding:11px 18px;font:inherit;font-size:14px;color:var(--ink)}
.ed-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-10)}
.ed-search .btn{flex:none}

/* A section rule between "Coming up" and "Been and gone". */
.ed-sec{font-size:20px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;
        margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ed-sec .fine{font-size:12.5px;font-weight:700;color:var(--mute);background:var(--bg);
              border-radius:999px;padding:3px 10px}

.ed-count{margin:0;font-size:13.5px;color:var(--mute);font-weight:600}
.ed-count b{color:var(--ink)}

/* Said out loud when the feed is the last one we held, not the live one. */
.ed-note{margin:0;background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;
         padding:12px 16px;font-size:13.5px;color:#92400E;font-weight:600}

.ed-empty{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:40px 24px;text-align:center}
.ed-empty b{display:block;font-size:16px;margin-bottom:6px}
.ed-empty p{margin:0;font-size:14px;color:var(--mute);line-height:1.6}

/* ---------- The list ---------- */
.ed-list{display:flex;flex-direction:column;gap:12px}

.ed-item{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;
         display:flex;flex-direction:column;gap:10px}
.ed-item:hover{box-shadow:0 6px 22px rgba(15,31,74,.10)}

.ed-link{display:block;color:inherit}
.ed-link:hover h2{color:var(--blue)}

.ed-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
         letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ed-meta .sec{color:var(--blue);background:var(--blue-10);border-radius:999px;padding:3px 10px}

.ed-item h2{font-size:18.5px;line-height:1.35;letter-spacing:-.01em;margin:8px 0 0}
.ed-item p{margin:6px 0 0;font-size:14px;line-height:1.6;color:#475569}

.ed-tags{display:flex;flex-wrap:wrap;gap:6px}
.ed-tags .tag{font-size:11px;font-weight:700;color:var(--mute);background:var(--bg);
              border-radius:999px;padding:4px 10px;letter-spacing:.02em}

.ed-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:8px}
.ed-pager .fine{font-size:13px;font-weight:600;color:var(--mute)}

.ed-source{margin:0;padding-top:8px;font-size:12.5px;color:var(--mute);line-height:1.6}
.ed-source a{color:var(--blue);font-weight:600}

/* ---------- Events ---------- */
.ev-list{display:flex;flex-direction:column;gap:12px}

/* Date leaf, the organiser's artwork, then the details. A listing with no
   artwork drops the middle column rather than leaving a gap where one
   would have been. */
.ev-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;
         display:grid;grid-template-columns:72px 220px minmax(0,1fr);gap:18px;align-items:start}
.ev-card.no-img{grid-template-columns:72px minmax(0,1fr)}
/* The row is named on every child. The artwork comes first in the markup
   but sits in the second column, and auto-placement would answer that by
   dropping the date leaf onto a second row. */
.ev-date{grid-column:1;grid-row:1}
.ev-shot{grid-column:2;grid-row:1}
.ev-body{grid-column:3;grid-row:1}
.ev-card.no-img .ev-body{grid-column:2;grid-row:1}

.ev-shot{display:block;border-radius:12px;overflow:hidden;background:var(--bg);align-self:start}
/* width/height are on the tag, so the row does not jump as it loads. */
.ev-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ev-card:hover .ev-shot img{opacity:.94}
.ev-card:hover{box-shadow:0 6px 22px rgba(15,31,74,.10)}
.ev-card.past{opacity:.62}

/* A torn-off calendar leaf: day, month, year. */
.ev-date{background:var(--blue-10);border-radius:12px;padding:10px 6px;text-align:center;
         display:flex;flex-direction:column;line-height:1.1}
.ev-date b{font-size:26px;letter-spacing:-.02em;color:var(--blue)}
.ev-date span{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--blue);margin-top:2px}
.ev-date i{font-size:11px;font-style:normal;font-weight:600;color:var(--mute);margin-top:3px}
.ev-date.none{background:var(--bg)}
.ev-date.none b,.ev-date.none span{color:var(--mute)}

.ev-body{min-width:0}
.ev-body h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;margin:0}
.ev-body h3 a{color:inherit}
.ev-body h3 a:hover{color:var(--blue)}

.ev-facts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.ev-facts li{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-facts span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ev-facts b{font-size:13.5px;font-weight:700}

.ev-sum{margin:12px 0 0;font-size:14px;line-height:1.6;color:#475569}
.ev-more{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--blue)}
.ev-more:hover{text-decoration:underline}

/* ---------- One article ---------- */
.art-wrap{max-width:840px}
.art{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:32px 36px;
     display:flex;flex-direction:column;gap:12px}

.art-back{font-size:13.5px;font-weight:700;color:var(--blue)}
.art-back:hover{text-decoration:underline}

.art h1{font-size:30px;line-height:1.25;letter-spacing:-.02em;margin:4px 0 0}

.art-facts{list-style:none;margin:8px 0 0;padding:16px 18px;background:var(--bg);border-radius:14px;
           display:flex;flex-wrap:wrap;gap:12px 32px}
.art-facts li{display:flex;flex-direction:column;gap:3px;min-width:0}
.art-facts span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.art-facts b{font-size:14px}

/* The one block on the site that prints HTML from elsewhere; every rule
   here is defensive, because the markup arrives without classes. */
.art-body{font-size:15.5px;line-height:1.75;color:#1E293B}
.art-body > :first-child{margin-top:0}
.art-body p{margin:0 0 16px}
.art-body h2{font-size:21px;margin:28px 0 10px;letter-spacing:-.01em}
.art-body h3,.art-body h4{font-size:17px;margin:22px 0 8px}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:22px}
.art-body li{margin:0 0 6px}
.art-body a{color:var(--blue);font-weight:600;text-decoration:underline;
            overflow-wrap:anywhere}
.art-body blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--blue-10);
                     color:#475569;font-style:italic}
/* A wide table scrolls inside the article rather than widening the page. */
.art-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;display:block;overflow-x:auto}
.art-body th,.art-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.art-body th{background:var(--bg);font-weight:700}
.art-body figure{margin:0 0 16px}
.art-body figcaption{font-size:12.5px;color:var(--mute);margin-top:6px}

@media (max-width:767px){
  .ed-head h1{font-size:27px}
  .ed-search{flex-wrap:wrap}
  .ed-search input{width:100%;flex:1 0 100%}
  .ev-date b{font-size:21px}
  .art{padding:22px 18px}
  .art h1{font-size:24px}
}

/* =====================================================================
   /news — two columns, as news.mesteel.com runs its own front page.
   Middle East on the left with a country filter, the world on the right.
   ===================================================================== */
.nw-wrap{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;gap:16px}

.nw-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
         background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.nw-col{min-width:0;padding:28px 32px 32px}
.nw-col + .nw-col{border-left:1px solid var(--line)}

.nw-title{font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--blue);margin:0}

/* ---------- Country filter ---------- */
.nw-filter{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:18px}
.nw-filter .chev{color:var(--ink);font-weight:800;font-size:15px;margin-right:6px}
.nw-filter a{font-size:14.5px;font-weight:600;color:#64748B;padding:4px 0}
.nw-filter a:hover{color:var(--blue)}
.nw-filter a.on{color:var(--ink);font-weight:800}

/* <details>, so the overflow list needs no script. */
.nw-more{position:relative}
.nw-more summary{list-style:none;cursor:pointer;font-size:14.5px;font-weight:600;color:#64748B;
                 display:inline-flex;align-items:center;gap:5px;padding:4px 0}
.nw-more summary::-webkit-details-marker{display:none}
.nw-more summary:hover{color:var(--blue)}
.nw-more[open] summary{color:var(--ink);font-weight:800}
.nw-more[open] summary span{transform:rotate(180deg)}
.nw-more summary span{display:inline-block;transition:transform .15s ease;font-size:12px}

.nw-more-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:240px;max-height:320px;
               overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;
               box-shadow:0 12px 34px rgba(15,31,74,.16);padding:8px}
.nw-more-panel a{display:flex;justify-content:space-between;align-items:center;gap:16px;
                 padding:8px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink)}
.nw-more-panel a:hover{background:var(--bg);color:var(--blue)}
.nw-more-panel a.on{background:var(--blue-10);color:var(--blue);font-weight:800}
.nw-more-panel a span{font-size:11.5px;font-weight:700;color:var(--mute)}

.nw-active{margin:14px 0 0;font-size:13.5px;color:var(--mute);font-weight:600}
.nw-active b{color:var(--ink)}
.nw-active a{color:var(--blue);font-weight:700;margin-left:4px}

/* ---------- Articles ---------- */
.nw-list{margin-top:6px}
.nw-item{padding:22px 0;border-bottom:1px solid var(--line)}
.nw-item:last-child{border-bottom:0;padding-bottom:0}

.nw-item h3{font-size:19px;line-height:1.32;letter-spacing:-.01em;margin:0}
.nw-item h3 a{color:var(--ink)}
.nw-item h3 a:hover{color:var(--blue)}

/* The newsroom's own badge, in its own red — deliberately not a token,
   because it is their label rather than part of this site's palette. */
.nw-flag{display:inline-block;background:#E8112D;color:#fff;font-size:13px;font-weight:700;
         line-height:1.3;padding:2px 8px;margin-right:8px;vertical-align:2px;white-space:nowrap}

.nw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:12px;
         font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nw-meta .place{color:var(--blue)}
.nw-meta time{color:#475569}

.nw-item p{margin:14px 0 0;font-size:14.5px;line-height:1.65;color:#64748B}

.ed-empty.simple{background:none;box-shadow:none;padding:28px 0;text-align:left;
                 color:var(--mute);font-size:14px}

@media (max-width:900px){
  .nw-cols{grid-template-columns:minmax(0,1fr)}
  .nw-col{padding:24px 20px}
  .nw-col + .nw-col{border-left:0;border-top:1px solid var(--line)}
  .nw-title{font-size:25px}
  .nw-item h3{font-size:17.5px}
  /* Anchored to the viewport edge instead of overflowing it. */
  .nw-more-panel{left:auto;right:0;min-width:200px}
}


/* Below the two-column breakpoint the artwork goes full width above the
   listing, with the date leaf and the details beneath it. */
@media (max-width:900px){
  .ev-card{grid-template-columns:60px minmax(0,1fr);gap:8px 14px;padding:18px}
  .ev-shot{grid-column:1 / -1;grid-row:1;margin-bottom:6px}
  .ev-date{grid-column:1;grid-row:2}
  .ev-body,.ev-card.no-img .ev-body{grid-column:2;grid-row:2}
  .ev-card.no-img{grid-template-columns:60px minmax(0,1fr)}
  .ev-card.no-img .ev-date{grid-row:1}
  .ev-card.no-img .ev-body{grid-row:1}
}

/* The lead image on an article. */
.art-shot{margin:8px 0 4px;border-radius:14px;overflow:hidden;background:var(--bg)}
.art-shot img{display:block;width:100%;height:auto}
/* ---------- Jobs ----------
   The same card as an article, with the facts a vacancy carries instead
   of an excerpt. */
.job-item h2{margin-top:6px}
.ed-meta .sec.alt{color:var(--sell);background:var(--sell-10)}

.job-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:10px;
           font-size:13.5px;color:var(--mute)}
.job-facts .co{font-weight:700;color:var(--blue)}
.job-facts .co:hover{text-decoration:underline}
.job-facts .pay{margin-left:auto;font-size:13.5px;color:var(--ink)}

@media (max-width:600px){
  .job-facts .pay{margin-left:0;flex:1 0 100%}
}

/* The section rule separates one list from the next; directly under the
   hero it has nothing to separate. */
.ed-wrap > .ed-sec:first-child{border-top:0;padding-top:0;margin-top:0}

/* ---------- Job board tabs ---------- */
.job-tabs{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
          padding-bottom:4px;border-bottom:1px solid var(--line)}
.job-tabs > a:not(.btn){font-size:15px;font-weight:700;color:var(--mute);
                        padding:8px 0 12px;border-bottom:3px solid transparent;margin-bottom:-5px}
.job-tabs > a:not(.btn):hover{color:var(--blue)}
.job-tabs > a.on{color:var(--ink);border-bottom-color:var(--blue)}
.job-tabs .sp{flex:1}
.job-tabs .btn{padding:8px 16px;font-size:13.5px}

/* One candidate. */
.cv-name{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--blue)}
.cv-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-top:14px}
.cv-list .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
            color:var(--mute);min-width:88px}

/* The apply form sits under the article rather than beside it. */
.apply-card{margin-top:16px}
.ch.tight{margin-top:8px}

/* ---------- Dashboard cards under an article ----------
   /jobs/{uuid} and /jobs/wanted/{uuid} hang cards below an article: the
   apply form, "This is your vacancy", the candidate's contact panel.
   They load dashboard.css for the vocabulary those cards are built from
   — .ch, .fld, .g2, .file-row — but its card rules are scoped to
   .dash-main, which is not on these pages. So the cards had NO padding
   at all, their hints printed at body size in near-black, and .save-row
   kept the dashboard's sticky-footer behaviour, which floated the Send
   button on top of the covering note above it.

   Ported rather than widening dashboard.css's own selectors, which would
   reach every page that loads it. billing.css carries the same short
   port for /membership; this is the handful those two pages use. */
.art-wrap > .card{padding:20px 22px;display:flex;flex-direction:column;gap:12px;
  border:0;box-shadow:var(--shadow)}
.art-wrap .card .hint{margin:0;font-size:13.5px;line-height:1.55;
  color:#475569;text-wrap:pretty}
.art-wrap .card p.bad{margin:0;color:var(--red);font-size:13px;font-weight:600}

/* Static, not sticky: there is no long form here to scroll past, and
   sticky is what put the button over the textarea. */
.art-wrap .save-row{position:static;background:none;box-shadow:none;padding:0}

@media (max-width:639px){
  .art-wrap > .card{padding:18px}
}
.ok-row{margin:0;background:var(--sell-10);color:#14532D;border-radius:12px;
        padding:14px 16px;font-size:14px;font-weight:600}

/* =====================================================================
   Documents — /about, /advertise, /terms, /privacy, /cookies
   ---------------------------------------------------------------------
   One measure, one rhythm. These are pages somebody reads a paragraph of
   and then leaves, or reads all of because they are about to sign
   something, and both want the same thing: a column narrow enough to
   track a line back to the next one.
   ===================================================================== */

.doc-wrap{padding-top:34px;padding-bottom:72px}
.doc{max-width:720px;margin:0 auto}

.doc-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.doc-head h1{font-size:40px;letter-spacing:-.025em;line-height:1.12;margin:0}
.doc-intro{margin:14px 0 0;font-size:18.5px;line-height:1.55;color:#334155;text-wrap:pretty}

.doc-sec{margin-top:34px}
.doc-sec:first-of-type{margin-top:0}
.doc-sec h2{font-size:21px;letter-spacing:-.015em;line-height:1.3;margin:0 0 12px}
.doc-sec p{margin:0 0 14px;font-size:16px;line-height:1.68;color:#334155;text-wrap:pretty}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec a{color:var(--blue);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.doc-sec a:hover{color:var(--navy)}
.doc-sec b,.doc-sec strong{color:var(--ink);font-weight:700}

/* The bullets carry most of the load on these pages — what a membership
   includes, who can see which field — so they are spaced as their own
   blocks rather than run together as a list. */
.doc-list{margin:0 0 14px;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:11px}
.doc-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.62;
  color:#334155;text-wrap:pretty}
.doc-list li:before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.55}

/* The aside: the sentence that answers "but why is it like that". */
.doc-note{background:var(--bg);border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;padding:14px 18px;font-size:15px;line-height:1.6;
  color:#475569}
.doc-sec .doc-note{margin:0 0 14px}

.doc-updated{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute)}
.doc-head .doc-updated{margin:16px 0 0;padding-top:0;border-top:0}

@media (max-width:720px){
  .doc-head h1{font-size:31px}
  .doc-intro{font-size:17px}
  .doc-wrap{padding-bottom:52px}
}