/* Simply Desserts article hubs (Blog, Press). Loaded after the theme's sd.css and the shared hub.css (the recipes
   hub's stylesheet: hero, filter bar, grid, slider, product panel, page colours). This file only adds what an
   article needs that a recipe does not: landscape cards, the topic row as a slider on every width, the article
   body, tables, the podcast player, the press contact. Same breakpoints: phone < 640, tablet 640 to 1023, desktop 1024+. */

/* ---------------------------------------------------------------- cards: article photos are landscape */
.rx-grid .ax-card { aspect-ratio: 1 / 1.1; }
.ax-card--plain .rcard__link { background: var(--ink); }
/* article photos often carry their own lettering: a deeper shade behind the title keeps it readable */
.ax-card .rcard__link::after { background: linear-gradient(to top, rgba(43, 24, 15, .94) 0%, rgba(43, 24, 15, .8) 32%, rgba(43, 24, 15, .28) 56%, rgba(43, 24, 15, 0) 74%); }
.rwall__grid .ax-card .rcard__body h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rwall__grid .rcard--feature .rcard__body h3 { max-width: 20ch; font-size: clamp(1.6rem, 2.5vw, 2.6rem); -webkit-line-clamp: 4; }

/* ---------------------------------------------------------------- the topic row */
.ax-tile .rx-line__plate { overflow: hidden; background: var(--rx-yellow); }
.ax-tile .rx-line__plate img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .ax-tile:hover .rx-line__plate img { transform: scale(1.08); } }
/* more than five tiles: the row is a slider on desktop too, arrows at each end, five tiles in view */
@media (min-width: 1024px) {
  .ax-lines--6 .rx-lines__rail { padding-inline: 64px; }
  .ax-lines--6 .rx-lines__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 5); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; scrollbar-width: none; }
  .ax-lines--6 .rx-lines__grid::-webkit-scrollbar { display: none; }
  .ax-lines--6 .rx-lines__grid li { scroll-snap-align: start; }
  .ax-lines--6 .rx-lines__btn { display: grid; top: calc(50% - 7px); }
  .ax-lines--3 .rx-lines__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
  .ax-lines--4 .rx-lines__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- article hero */
.ax-hero .rx-rhero__mosaic--solo { max-width: none; }
.ax-hero .rx-rhero__media { aspect-ratio: 3 / 2; }
.ax-hero .rx-rhero__title { font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.08; }
.ax-hero .rx-by { font-weight: 500; }
.ax-hero--bare { display: none; }
/* a small original (a podcast's cover art) is shown at its own size, never blown up */
.ax-hero .ax-hero--small { max-width: 420px; width: 100%; margin-inline: auto; }
.ax-hero .rx-rhero__in:has(> .ax-hero--bare) { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.ax-hero .rx-actions .btn .icon { margin-left: 4px; }

/* ---------------------------------------------------------------- article body */
.ax-layout { grid-template-areas: "body panel"; }
.ax-body { grid-area: body; min-width: 0; max-width: 78ch; font-size: 1.0625rem; line-height: 1.7; }
.ax-body > :first-child { margin-top: 0; }
.ax-body p { margin: 0 0 1.15em; }
.ax-body h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; margin: 2.4rem 0 .8rem; }
.ax-body h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; margin: 2rem 0 .6rem; }
.ax-body h4, .ax-body h5, .ax-body h6 { font-size: 1.125rem; margin: 1.6rem 0 .5rem; }
.ax-body ul, .ax-body ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.ax-body li { margin-bottom: .45em; }
.ax-body li > ul, .ax-body li > ol { margin-top: .45em; }
.ax-body img { max-width: 100%; height: auto; border-radius: 20px; margin-block: .4rem; }
.ax-body figure { margin: 1.5rem 0; }
.ax-body figcaption { margin-top: .5rem; font-size: .875rem; color: var(--rx-ink-2); }
.ax-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ax-body blockquote { margin: 1.6rem 0; padding: 18px 24px; border-radius: 24px; background: var(--rp-chip); color: var(--rp-chip-ink, var(--ink)); }
.ax-body blockquote a { color: inherit; }
.ax-body blockquote > :last-child { margin-bottom: 0; }
.ax-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.ax-body .rx-yt { margin: 1.5rem 0; }
.ax-toc { margin: 1.6rem 0; padding: 20px 24px; border-radius: 24px; background: var(--soft); }
.ax-toc h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.ax-toc > :last-child { margin-bottom: 0; }
.ax-recipe { margin: 1.6rem 0; padding: 22px 24px; border-radius: 24px; border: 2px solid var(--line); }
.ax-recipe > :first-child { margin-top: 0; }
.ax-recipe > :last-child { margin-bottom: 0; }
.ax-note { padding: 14px 18px; border-radius: 16px; background: var(--soft); font-size: .9375rem; }
.ax-source { margin-top: 1.75rem; }
.ax-source .btn, .ax-listen .btn { text-decoration: none; }
.ax-source .btn .icon { margin-left: 4px; }
.ax-body a.btn { color: #fff; }
@media (hover: hover) { .ax-body a.btn:hover { color: var(--ink); } }

.ax-table { overflow-x: auto; margin: 1.6rem 0; border: 1px solid var(--line); border-radius: 16px; }
.ax-table:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ax-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.ax-table th, .ax-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ax-table th { background: var(--soft); font-weight: 700; }
.ax-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- podcasts and press */
.ax-listen { display: grid; justify-items: start; gap: 10px; margin: 0 0 1.75rem; padding: 22px 24px; border-radius: 24px; background: var(--soft); }
.ax-listen p { margin: 0; }
.ax-listen iframe { width: 100%; border: 0; border-radius: 12px; }
.ax-listen.is-playing { display: block; padding: 12px; }
.ax-press-panel p { margin: 0 0 1rem; }
.ax-press-panel a:not(.btn) { color: inherit; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ax-contact__who { font-size: 1.125rem; }
.ax-contact__who a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.ax-contact .btn .icon { width: 1.1em; height: 1.1em; margin-right: 6px; }

/* ---------------------------------------------------------------- tablet and phone (tablet follows phone) */
@media (max-width: 1023px) {
  .ax-layout { grid-template-areas: "body" "panel"; }
  .ax-body { max-width: 720px; width: 100%; margin-inline: auto; }
  .ax-layout .rx-panel { max-width: 720px; width: 100%; margin-inline: auto; }
  .ax-hero .rx-by { text-align: center; }
}
@media (max-width: 639px) {
  .rx-grid .ax-card { aspect-ratio: 3 / 4.4; }
  .ax-hero .rx-rhero__media { border-radius: 24px; }
  .ax-body { font-size: 1rem; }
  .ax-toc, .ax-recipe, .ax-listen { padding: 16px 18px; border-radius: 20px; }
  .rwall__grid .rcard--feature .rcard__body h3 { font-size: 1.5rem; }
}

@media print {
  .ax-layout { display: block; }
  .ax-listen, .ax-source { display: none !important; }
}