/* Distilcuts additions on top of Basho's screen.css (kept untouched so Basho updates stay mergeable) */

/* Hero
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero-title {
   text-wrap: pretty; /* no lone "!" on the last line */
}

.hero-description {
   font-size: 2.2rem;
   line-height: 1.5;
   max-width: 900px;
   margin: -2vh 0 4.5vh;
   opacity: var(--opacity-one);
}

/* Header social links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Instagram, LinkedIn and search form one evenly spaced icon group (18px between icons) */
.header-nav .header-social {
   display: flex;
}

.header-social:not(:has(a)),
.header-social.is-mobile {
   display: none;
}

.header-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 44px;
}

.header-social svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

/* Daily
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Bottom spacing on the section, not the grid, so the mobile button keeps it below */
.daily-section {
   margin-bottom: 8vh;
}

.daily-section .special-wrap {
   grid-template-columns: repeat(4, 1fr);
   margin-bottom: 0;
}

.daily-section .global-subtitle {
   flex-wrap: wrap;
   gap: 0 16px;
}

/* "All editions / episodes" link: in the section header on desktop, a centered button under the section on mobile */
.section-more {
   flex: none;
   align-self: center;
   font-size: 1.6rem;
   margin: -12px 0 -12px auto;
   padding: 12px 0;
   font-weight: var(--font-weight-three-medium);
}

.section-more-button.is-mobile {
   display: none;
}

/* Logos
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.logos-section {
   margin-bottom: 8vh;
   text-align: center;
}

.logos-title {
   font-size: 2.4rem;
   font-weight: var(--font-weight-three-medium);
   line-height: 1.35;
   max-width: 700px;
   margin: 0 auto 4vh;
}

.logos-marquee {
   display: flex;
   overflow: hidden;
   --marquee-gap: 64px;
   gap: var(--marquee-gap);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logos-track {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: space-around;
   gap: 64px;
   min-width: 100%;
   animation: marquee-scroll 40s linear infinite;
}

.logos-marquee:hover .logos-track {
   animation-play-state: paused;
}

/* Flatten Ghost's gallery/image card markup so every logo is a flex item */
.logos-track :is(figure, div, p, a) {
   display: contents;
}

.logos-track figcaption {
   display: none;
}

.logos-track img {
   width: auto;
   max-width: 160px;
   height: 48px;
   object-fit: contain;
   filter: grayscale(1);
   opacity: .7;
   transition: filter .2s, opacity .2s;
}

.logos-track img:hover {
   filter: none;
   opacity: 1;
}

.dark-mode .logos-track img {
   filter: grayscale(1) invert(1);
}


@media (prefers-reduced-motion: reduce) {
   .logos-marquee {
      -webkit-mask-image: none;
      mask-image: none;
   }

   .logos-track {
      flex-wrap: wrap;
      justify-content: center;
      animation: none;
   }

   .logos-track[aria-hidden] {
      display: none;
   }
}

/* Sponsor
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.sponsor-section {
   margin-bottom: 8vh;
}

.sponsor-label {
   display: block;
   margin-bottom: 1.5vh;
   font-size: 1.3rem;
   font-weight: var(--font-weight-three-bold);
   letter-spacing: .1em;
   text-transform: uppercase;
   opacity: var(--opacity-one);
}

.sponsor-card {
   display: flex;
   flex-wrap: wrap;
   color: inherit;
   text-decoration: none;
   background-color: var(--color-nine);
}

.sponsor-image {
   display: block;
   flex: 1 1 400px;
   min-width: 0;
   aspect-ratio: 1200 / 628;
   object-fit: cover;
}

.sponsor-content {
   display: flex;
   flex: 1 1 340px;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 2vh;
   padding: 4vh 4vw;
}

.sponsor-title {
   font-size: 3.6rem;
   line-height: 1.15;
   margin: 0;
}

.sponsor-excerpt {
   font-size: 1.9rem;
   line-height: 1.5;
   margin: 0;
   opacity: var(--opacity-one);
}

.sponsor-card .global-button {
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   padding: 14px 28px;
}

/* Promos
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.promos-section {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--grid-gap);
   margin-bottom: 8vh;
}

.promo-card {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px;
   color: inherit;
   text-decoration: none;
   border: var(--border) var(--color-border-one);
}

.promo-image {
   flex: none;
   width: 88px;
   height: 88px;
   object-fit: cover;
   border-radius: 14px;
}

.promo-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.promo-title {
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
}

.promo-excerpt {
   font-size: 1.5rem;
   opacity: var(--opacity-one);
}

/* RWD
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .daily-section .special-wrap {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:768px) {
   .hero-description {
      font-size: 1.7rem;
   }

   .sponsor-title {
      font-size: 2.6rem;
   }

   .sponsor-excerpt {
      font-size: 1.6rem;
   }

   .logos-title {
      font-size: 1.9rem;
   }

   .logos-track img {
      max-width: 120px;
      height: 40px;
   }
}

@media (max-width:768px) {
   .section-more {
      display: none;
   }

   .section-more-button.is-mobile {
      display: table;
   }
}

/* Le Fil
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Title and lead on top, the fil full width, "Tout le fil" below */
.fil-section {
   margin-bottom: 8vh;
}

.fil-intro {
   max-width: 700px;
   margin-bottom: 4vh;
}

.fil-heading,
.fil-page-title {
   font-size: 4.4rem;
   line-height: 1.1;
   margin: 0;
}

.fil-lead {
   font-size: 1.8rem;
   line-height: 1.5;
   margin: 1.5vh 0 0;
   opacity: var(--opacity-one);
}

.section-more-button {
   display: table;
   margin: 4vh auto 0;
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   padding: 14px 26px;
}

.fil-page {
   max-width: 1000px;
   margin-bottom: 10vh;
}

.fil-page-title {
   margin-top: 4vh;
}

.fil-day-heading:not(:first-child) {
   margin-top: 5vh;
}

.fil-day-heading {
   font-size: 1.3rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin: 0;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--color-font-one);
}

.brief {
   display: grid;
   grid-template-columns: 64px 140px minmax(0, 1fr);
   gap: 16px;
   padding: 18px 0;
   border-bottom: var(--border) var(--color-border-one);
}

.brief:last-child {
   border-bottom: 0;
}

.brief-time {
   font-size: 1.5rem;
   font-variant-numeric: tabular-nums;
   padding-top: 3px;
   opacity: var(--opacity-one);
}

.brief-source {
   font-size: 1.3rem;
   font-weight: var(--font-weight-three-bold);
   padding-top: 3px;
   /* Darkened accent: brand oranges sit near 4:1 on white, under the 4.5:1 small text needs */
   color: color-mix(in srgb, var(--ghost-accent-color), #000 25%);
}

.dark-mode .brief-source {
   color: var(--ghost-accent-color);
}

.brief.is-external .brief-source {
   color: hsl(var(--hue, 200) 70% 30%);
}

.dark-mode .brief.is-external .brief-source {
   color: hsl(var(--hue, 200) 70% 72%);
}

.brief-title {
   font-size: 2rem;
   line-height: 1.3;
   margin: 0;
}

.brief-title a {
   color: inherit;
   text-decoration: none;
}

.brief-title a:hover {
   text-decoration: underline;
}

.brief-excerpt {
   font-size: 1.6rem;
   line-height: 1.6;
   margin: 6px 0 0;
   opacity: var(--opacity-one);
}

/* Live bar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.live-bar:not(:has(li)) {
   display: none;
}

.live-bar {
   margin-bottom: 3vh;
   font-size: 1.4rem;
   color: var(--color-body);
   background-color: var(--color-font-one);
}

.live-bar-wrap {
   display: flex;
   align-items: center;
   gap: 16px;
   overflow: hidden;
}

.live-bar-label {
   display: flex;
   flex: none;
   align-items: center;
   gap: 8px;
   font-size: 1.2rem;
   font-weight: var(--font-weight-three-bold);
   letter-spacing: .08em;
   text-transform: uppercase;
}

.live-bar-label::before {
   width: 8px;
   height: 8px;
   content: '';
   border-radius: 50%;
   background-color: var(--ghost-accent-color);
}

.live-bar-marquee {
   display: flex;
   flex: 1 1 auto;
   gap: 32px;
   min-width: 0;
   overflow: hidden;
}

.live-bar-track {
   display: flex;
   flex: none;
   gap: 32px;
   min-width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   white-space: nowrap;
   animation: marquee-scroll 60s linear infinite;
}

.live-bar a {
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   color: inherit;
   text-decoration: none;
}

.live-bar a:hover span:last-child {
   text-decoration: underline;
}

.live-bar time {
   font-variant-numeric: tabular-nums;
   opacity: .7;
}

.live-bar-toggle {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   cursor: pointer;
   color: inherit;
   border: 0;
   background: transparent;
}

.live-bar-toggle svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
}

.icon-play,
[aria-pressed="true"] .icon-pause {
   display: none;
}

[aria-pressed="true"] .icon-play {
   display: block;
}

.live-bar-marquee:hover .live-bar-track,
.live-bar-marquee:focus-within .live-bar-track,
.is-paused .live-bar-track {
   animation-play-state: paused;
}

@keyframes marquee-scroll {
   to { transform: translateX(calc(-100% - var(--marquee-gap, 32px))); }
}

/* Podcast
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.podcast-section {
   margin-bottom: 8vh;
}

/* Latest episodes in one row (6 desktop, 4 tablet, 2 × 2 mobile); "Tous les épisodes" leads to the rest */
.podcast-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: var(--grid-gap);
   margin: 0;
   padding: 0;
   list-style: none;
}

@media (max-width:1024px) {
   .podcast-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .podcast-episode:nth-child(n+5) {
      display: none;
   }
}

.podcast-episode a {
   display: flex;
   flex-direction: column;
   gap: 8px;
   color: inherit;
   text-decoration: none;
}

.podcast-cover {
   display: block;
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
   transition: transform .3s ease;
}

.podcast-episode a:hover .podcast-cover {
   transform: translateY(-3px);
}

.podcast-meta {
   font-size: 1.3rem;
   opacity: var(--opacity-one);
}

.podcast-title {
   font-size: 1.7rem;
   font-weight: var(--font-weight-three-medium);
   line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
   .live-bar-track {
      animation: none;
   }

   .live-bar-track[aria-hidden],
   .live-bar-toggle {
      display: none;
   }

   .live-bar-marquee {
      overflow-x: auto;
   }
}

@media (max-width:768px) {
   .podcast-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .brief {
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
   }

   .brief-body {
      grid-column: 1 / -1;
   }

   .brief-title {
      font-size: 1.8rem;
   }

   .fil-heading,
   .fil-page-title {
      font-size: 3.4rem;
   }
}

/* Accessibility fixes over Basho
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Basho removes the outline on its buttons; keyboard users need it back */
:focus-visible:not(input, textarea) {
   outline: 2px solid currentColor !important;
   outline-offset: 3px;
}

/* 44px hit area on the small slider arrows without moving them */
.featured-btn-previous,
.featured-btn-next {
   position: relative;
}

.featured-btn-previous::after,
.featured-btn-next::after {
   position: absolute;
   inset: -12px;
   content: '';
}

@media (max-width:1024px) {
   /* Footer links stacked in columns: full 44px rows for thumbs */
   .footer-nav-column li {
      margin-bottom: 0;
   }

   .footer-nav-column li a {
      display: inline-flex;
      align-items: center;
      min-width: 44px;
      min-height: 44px;
   }

   .footer-nav-column li svg {
      transform: none;
   }
}

/* Header: icon-only search, Sign in + Subscribe (mockup v1)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-search {
   color: inherit;
   border: 0;
   background: transparent;
}

@media (min-width:1025px) {
   /* Basho paints its search pill grey (and darker on hover): the icon stays bare */
   .header-search.is-desktop,
   .header-search.is-desktop:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 44px;
      padding: 0;
      background-color: transparent;
   }

   .header-search.is-desktop:hover {
      opacity: .6;
   }

   .header-search.is-desktop svg {
      width: 18px;
      margin: 0;
      transform: none;
   }
}

/* Basho positions the mobile icon itself; the button around it gets the 44px tap area */
.header-search.is-mobile {
   position: absolute;
   top: -1px;
   right: 36px;
   box-sizing: border-box;
   width: 44px;
   height: 44px;
   padding: 10px;
}

.header-search.is-mobile svg {
   position: static;
}

/* The desktop search button is hidden in the mobile menu; its list item must not leave a gap */
.header-nav .header-search-item {
   display: contents;
}

.header-nav .signin a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
}

@media (max-width:1024px) {
   /* Mobile: Instagram and LinkedIn leave the burger menu and sit next to the search icon */
   .header-nav nav .header-social {
      display: none;
   }

   .header-social.is-mobile {
      position: absolute;
      top: -1px;
      right: 80px;
      display: flex;
   }

   .header-social.is-mobile a {
      padding: 0;
      color: var(--color-font-one);
   }

   .header-social.is-mobile svg {
      width: 20px;
      height: 20px;
   }
}

/* Small laptops (1025–1279px): 5 menu items + icons + 2 buttons must fit on one line */
@media (min-width:1025px) and (max-width:1279px) {
   .header-nav nav a {
      font-size: 1.5rem;
   }

   .header-nav nav li {
      margin-left: 8px;
   }

   .header-nav .signup a {
      padding: 6px 14px;
   }
}

/* Search page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-page-form {
   width: min(560px, calc(100% - 2 * var(--margin-wrap-left-right, 20px)));
   margin: 4vh auto 0;
}

.search-page-form input {
   max-width: none;
   min-width: 0;
}

.search-page-empty {
   font-size: 1.9rem;
   text-align: center;
   margin: 0 0 6vh;
   opacity: var(--opacity-one);
}

/* Search modal (header icon, Cmd/Ctrl+K, "/")
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
html:has(.search-modal[open]) {
   overflow: hidden;
}

.search-modal {
   box-sizing: border-box;
   width: min(720px, calc(100% - 32px));
   max-height: min(720px, calc(100% - 20vh));
   margin: 10vh auto auto;
   padding: 0;
   overflow: hidden auto;
   color: var(--color-font-one);
   border: var(--border) var(--color-border-one);
   border-radius: calc(var(--border-radius) / 1.5);
   background-color: var(--color-body);
   box-shadow: 0 24px 80px -12px rgba(0, 0, 0, .35);
}

.search-modal::backdrop {
   background-color: rgba(20, 20, 22, .45);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

.search-modal-form {
   position: sticky;
   top: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 12px 0 22px;
   border-bottom: var(--border) var(--color-border-one);
   background-color: var(--color-body);
}

.search-modal-form > svg {
   flex: none;
   width: 20px;
   height: 20px;
   opacity: var(--opacity-one);
}

.search-modal-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 64px;
   font-size: 2rem;
   color: inherit;
   border: 0;
   outline: none;
   background: transparent;
}

.search-modal-input::-webkit-search-cancel-button {
   display: none;
}

.search-modal-close {
   flex: none;
   min-width: 44px;
   height: 32px;
   padding: 0 10px;
   font: inherit;
   font-size: 1.2rem;
   cursor: pointer;
   color: inherit;
   border: var(--border) var(--color-border-one);
   border-radius: 6px;
   background: transparent;
   opacity: var(--opacity-one);
}

.search-modal-close .is-word,
.search-modal-close .is-key {
   pointer-events: none;
}

.search-modal-close .is-word {
   display: none;
}

.search-modal-status:not(:empty) {
   margin: 0;
   padding: 22px;
   font-size: 1.6rem;
   opacity: var(--opacity-one);
}

.search-modal-results {
   margin: 0;
   padding: 8px;
   list-style: none;
}

.search-modal-results:empty {
   display: none;
}

.search-result {
   display: flex;
   gap: 14px;
   padding: 12px;
   color: inherit;
   text-decoration: none;
   border-radius: 8px;
}

.search-result:hover,
.search-result:focus-visible {
   background-color: var(--color-twelve);
}

.search-result-image {
   flex: none;
   width: 72px;
   height: 72px;
   object-fit: cover;
   border-radius: 6px;
}

.search-result-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}

.search-result-meta {
   font-size: 1.3rem;
   opacity: var(--opacity-one);
}

.search-result-title {
   font-family: var(--font-family-one);
   font-size: 1.8rem;
   font-weight: var(--font-weight-one-bold);
   line-height: 1.25;
}

.search-result-excerpt {
   display: -webkit-box;
   overflow: hidden;
   font-size: 1.4rem;
   line-height: 1.45;
   opacity: var(--opacity-one);
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.search-modal-all {
   display: block;
   padding: 16px 22px;
   font-size: 1.5rem;
   font-weight: var(--font-weight-three-medium);
   color: inherit;
   border-top: var(--border) var(--color-border-one);
}

@media (max-width:768px) {
   /* Full screen on phones */
   .search-modal {
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      margin: 0;
      border: 0;
      border-radius: 0;
   }

   .search-result-image {
      width: 56px;
      height: 56px;
   }

   /* No Escape key on phones */
   .search-modal-close .is-key {
      display: none;
   }

   .search-modal-close .is-word {
      display: inline;
   }
}