/* ============================================================
   MEDIA & PUBLICATIONS
   Blocks for /featured-media-publications/. Loads on top of dtl.css and
   reuses its tokens and bands; only the item treatments are new.
   Every selector stays under .dtl and every class carries the dtl-m- prefix.
   ============================================================ */

/* ---------- content width ----------
   Wider than a location page, because this one is a catalogue rather than a piece of
   writing: the extra width buys another column of cards instead of longer lines of
   text. Scoped to the media blocks so the location pages keep their reading measure.
   One number to tune; the grids re-flow off it by themselves. */
.dtl .dtl-m-hero>.dtl-wrap,
.dtl .dtl-m-nav>.dtl-wrap,
.dtl .dtl-m-featured>.dtl-wrap,
.dtl .dtl-m-section>.dtl-wrap,
.dtl .dtl-m-follow>.dtl-wrap{max-width:var(--dtl-m-wrap,1440px)}

/* ---------- editor-only note ---------- */
.dtl .dtl-editor-note{
  margin:0;padding:14px 18px;border:1px dashed var(--dtl-line);border-radius:var(--dtl-radius);
  background:var(--dtl-mist);color:var(--dtl-ink-soft);font-size:.9rem;font-family:var(--dtl-sans)
}

/* ---------- hero ---------- */
.dtl .dtl-m-hero{background:var(--dtl-abyss);color:#fff;text-align:center}
.dtl .dtl-m-hero .dtl-display{max-width:17ch;margin-inline:auto;color:#fff}
.dtl .dtl-m-hero .dtl-lead{max-width:62ch;margin-inline:auto;color:rgba(255,255,255,.79)}
.dtl .dtl-m-count{color:var(--dtl-butter);margin-bottom:18px}

.dtl .dtl-m-logowall{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;margin-top:clamp(30px,4vw,48px)
}
.dtl .dtl-m-logo{
  display:flex;align-items:center;justify-content:center;
  min-width:140px;height:74px;padding:12px 20px;
  background:rgba(255,255,255,.94);border-radius:var(--dtl-radius);
  transition:transform .18s ease,background .18s ease
}
.dtl a.dtl-m-logo:hover{transform:translateY(-2px);background:#fff}
.dtl .dtl-m-logo img{max-height:46px;max-width:180px;width:auto;height:auto;object-fit:contain}

/* ---------- jump nav ----------
   Sits in the flow and scrolls away with the page. */
.dtl .dtl-m-nav{
  background:var(--dtl-paper);
  border-bottom:1px solid var(--dtl-line)
}
.dtl .dtl-m-nav ul{
  display:flex;gap:6px;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none
}
.dtl .dtl-m-nav ul::-webkit-scrollbar{display:none}
.dtl .dtl-m-nav a{
  display:block;padding:15px 14px;white-space:nowrap;
  font-family:var(--dtl-sans);font-size:.92rem;font-weight:600;
  color:var(--dtl-ink-soft);text-decoration:none;border-bottom:2px solid transparent
}
.dtl .dtl-m-nav a:hover{color:var(--dtl-ultramarine);border-bottom-color:var(--dtl-ultramarine)}

/* A jump-nav click must not land the heading underneath the site header, which is
   pinned by Elementor's own JS and has no height we can hardcode — dtl-media.js
   measures whatever is actually pinned and writes it into --dtl-header-h. */
.dtl .dtl-m-section{scroll-margin-top:calc(var(--dtl-header-h,0px) + 24px)}

/* ---------- featured ---------- */
.dtl .dtl-m-featured-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:center}
.dtl .dtl-m-featured-media{
  position:relative;display:block;overflow:hidden;border-radius:var(--dtl-radius);
  background:var(--dtl-abyss);line-height:0
}
.dtl .dtl-m-featured-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.dtl .dtl-m-featured-body .dtl-h2{margin-top:6px}
.dtl .dtl-m-meta{margin:10px 0 0;font-family:var(--dtl-sans);font-size:.92rem;color:var(--dtl-ink-soft)}
.dtl .dtl-band--abyss .dtl-m-meta{color:rgba(255,255,255,.72)}
.dtl .dtl-m-hint{
  display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;
  font-family:var(--dtl-sans);font-size:.92rem;font-weight:600;color:var(--dtl-ultramarine)
}
.dtl .dtl-m-hint svg{width:18px;height:18px}
.dtl .dtl-band--abyss .dtl-m-hint{color:var(--dtl-butter)}

/* ---------- section head ---------- */
.dtl .dtl-m-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 30px;
  padding-bottom:20px;margin-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--dtl-line)
}
.dtl .dtl-m-sub{grid-column:1;margin:8px 0 0;font-family:var(--dtl-sans);color:var(--dtl-ink-soft);max-width:60ch}
.dtl .dtl-m-headlink{grid-column:2;grid-row:1/span 2;align-self:center}

/* ---------- layouts ---------- */
.dtl .dtl-m-grid{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.dtl .dtl-m-grid--media{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}

/* Columns, not a grid: these are magazine covers and text cards of very different
   heights, and a grid would stretch every card in a row to match the tallest. */
.dtl .dtl-m-columns{column-count:3;column-gap:clamp(18px,2vw,26px)}
.dtl .dtl-m-columns>*{break-inside:avoid;margin-bottom:clamp(18px,2vw,26px)}
/* the extra width earns a fourth column rather than wider cards */
@media (min-width:1300px){ .dtl .dtl-m-columns{column-count:4} }

.dtl .dtl-m-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);
  gap:clamp(16px,1.8vw,22px);overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x proximity;scrollbar-width:thin
}
.dtl .dtl-m-rail>*{scroll-snap-align:start}

/* ---------- cards ---------- */
.dtl .dtl-m-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--dtl-paper);border:1px solid var(--dtl-line);border-radius:var(--dtl-radius);
  color:inherit;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.dtl .dtl-m-card:hover{transform:translateY(-3px);border-color:var(--dtl-ultramarine);box-shadow:0 12px 30px rgba(10,18,48,.1)}

.dtl .dtl-m-thumb,.dtl .dtl-m-embed{position:relative;display:block;line-height:0;background:var(--dtl-abyss)}
.dtl .dtl-m-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.dtl .dtl-m-rail .dtl-m-thumb img{aspect-ratio:9/16}

/* Covers are a press wall: each is its own object with its own readable artwork,
   so they keep their natural proportions instead of being letterboxed into a frame. */
.dtl .dtl-m-cover{display:block;line-height:0;background:var(--dtl-paper)}
.dtl .dtl-m-cover img{width:100%;height:auto}
/* A card with no headline of its own is showing the artwork INSTEAD of a headline, so
   it still runs full width — only the hero wall shrinks logos to a common size. */
.dtl .dtl-m-card--logo .dtl-m-body{padding-top:14px}

.dtl .dtl-m-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;font-family:var(--dtl-sans)}
.dtl .dtl-m-outlet{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dtl-ultramarine)}
.dtl .dtl-m-title{font-size:1.02rem;font-weight:600;line-height:1.4;color:var(--dtl-ink)}
.dtl .dtl-m-date{font-size:.84rem;color:var(--dtl-ink-soft)}

/* ---------- play affordance ---------- */
.dtl .dtl-m-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:rgba(7,12,61,.78);color:#fff;
  transition:background .18s ease,scale .18s ease
}
.dtl .dtl-m-play svg{width:26px;height:26px;margin-left:3px}
.dtl .dtl-m-play--lg{width:76px;height:76px}
.dtl .dtl-m-play--lg svg{width:36px;height:36px}
.dtl .dtl-m-card:hover .dtl-m-play,.dtl .dtl-m-featured-media:hover .dtl-m-play{background:var(--dtl-ultramarine);scale:1.06}

.dtl .dtl-m-embed{width:100%}
.dtl .dtl-m-embed[data-ratio="16-9"]{aspect-ratio:16/9}
.dtl .dtl-m-embed[data-ratio="9-16"]{aspect-ratio:9/16}
.dtl .dtl-m-embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- follow ---------- */
.dtl .dtl-m-follow{text-align:center}
.dtl .dtl-m-follow .dtl-lead{max-width:54ch;margin-inline:auto}
.dtl .dtl-m-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,3vw,36px)}
.dtl .dtl-m-social a{
  padding:12px 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.34);
  font-family:var(--dtl-sans);font-size:.94rem;font-weight:600;color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease
}
.dtl .dtl-m-social a:hover{background:rgba(255,255,255,.12);border-color:#fff}
.dtl .dtl-band--paper .dtl-m-social a,.dtl .dtl-band--mist .dtl-m-social a{color:var(--dtl-ink);border-color:var(--dtl-line)}
.dtl .dtl-band--paper .dtl-m-social a:hover,.dtl .dtl-band--mist .dtl-m-social a:hover{background:var(--dtl-mist);border-color:var(--dtl-ultramarine)}

/* ---------- narrower ---------- */
@media (max-width:1000px){
  .dtl .dtl-m-columns{column-count:2}
  .dtl .dtl-m-featured-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  .dtl .dtl-m-head{grid-template-columns:1fr}
  .dtl .dtl-m-headlink{grid-column:1;grid-row:auto;justify-self:start}
  .dtl .dtl-m-grid,.dtl .dtl-m-grid--media{grid-template-columns:1fr}
}
@media (max-width:620px){
  .dtl .dtl-m-columns{column-count:1}
  .dtl .dtl-m-logo{min-width:118px;height:62px;padding:10px 14px}
  .dtl .dtl-m-logo img{max-height:36px;max-width:130px}
}
@media (prefers-reduced-motion:reduce){
  .dtl .dtl-m-card,.dtl .dtl-m-logo,.dtl .dtl-m-play{transition:none}
  .dtl .dtl-m-card:hover,.dtl a.dtl-m-logo:hover{transform:none}
}

/* ---------- paged sections ----------
   A native scroll-snap strip, not a JS carousel: every card is in the HTML, the
   pages simply slide. Swipe and trackpad work with no JavaScript at all, and the
   buttons below are revealed by the script only once it can drive them. */
.dtl .dtl-m-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* No horizontal padding. A page is flex:0 0 100% of the CONTENT box, so any
     side padding makes every page narrower than the scrollport and the next one
     peeks in at the edge. The vertical padding is real though: a horizontal
     scroller clips vertically too, and without it the hover lift is cut off. */
  padding-block:8px 16px;margin-block:-8px -16px
}
.dtl .dtl-m-track::-webkit-scrollbar{display:none}
.dtl .dtl-m-page{flex:0 0 100%;scroll-snap-align:start;align-content:start}
/* the page itself carries the grid, so it needs the gutter back on its own edges */
.dtl .dtl-m-track>.dtl-m-page+.dtl-m-page{margin-left:clamp(18px,2vw,26px)}

.dtl .dtl-m-pager{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(24px,3vw,34px)
}
.dtl .dtl-m-pager-btn{
  display:grid;place-items:center;width:42px;height:42px;padding:0;
  border:1.5px solid var(--dtl-line);border-radius:50%;
  background:var(--dtl-paper);color:var(--dtl-ink);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease
}
.dtl .dtl-m-pager-btn svg{width:20px;height:20px}
.dtl .dtl-m-pager-btn:hover:not(:disabled){border-color:var(--dtl-ultramarine);color:var(--dtl-ultramarine)}
.dtl .dtl-m-pager-btn:disabled{opacity:.34;cursor:default}

.dtl .dtl-m-dots{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.dtl .dtl-m-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:var(--dtl-line);cursor:pointer;transition:background .18s ease,width .18s ease
}
.dtl .dtl-m-dot[aria-current="true"]{background:var(--dtl-ultramarine);width:26px;border-radius:999px}
.dtl .dtl-m-dot:hover{background:var(--dtl-ink-soft)}

@media (prefers-reduced-motion:reduce){
  .dtl .dtl-m-track{scroll-behavior:auto}
  .dtl .dtl-m-pager-btn,.dtl .dtl-m-dot{transition:none}
}