/* Rich blog layout: tables, figures, callouts and app cards.
   Loaded only on posts with `richLayout: true` in their front matter (see partials/head.html),
   scoped under .blogpost--rich so older posts are untouched. Uses the theme's colour tokens,
   so light and dark themes both work. */

/* One column for everything: text (about 75 characters a line), tables, cards, figures and boxes
   share the same width and edges. The post header lines up with it. */
.blogpost--rich,
.post-header--rich {
  --post-col: 760px;
}

.blogpost--rich {
  font-size: 1.8rem;
  line-height: 1.7;
}

.blogpost--rich > * {
  max-width: var(--post-col);
  margin-left: auto;
  margin-right: auto;
}

/* Same left edge as the reading column (the header's padding is relative to the post's width). */
.post-header--rich {
  padding-left: max(26px, calc((100% - var(--post-col)) / 2));
  padding-right: max(26px, calc((100% - var(--post-col)) / 2));
}

@media (max-width: 991px) {
  .post-header--rich {
    padding-left: max(18px, calc((100% - var(--post-col)) / 2));
    padding-right: max(18px, calc((100% - var(--post-col)) / 2));
  }
}

.blogpost--rich p,
.blogpost--rich li {
  color: var(--text);
  font-size: 1.8rem;
}

.blogpost--rich li + li {
  margin-top: 0.45em;
}

.blogpost--rich strong {
  color: var(--heading);
}

/* Section headers: a short accent bar instead of a full-width rule. */
.blogpost--rich h2 {
  margin-top: 2.6em;
  margin-bottom: 0.7em;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}

.blogpost--rich h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--primary);
}

.blogpost--rich h3 {
  margin-top: 1.9em;
  margin-bottom: 0.6em;
  font-size: 2.2rem;
  font-weight: 650;
  line-height: 1.3;
  scroll-margin-top: 90px;
}

/* App entries in the list: a divider above each one. */
.blogpost--rich h3.entry {
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-size: 2.5rem;
  font-weight: 700;
}

.blogpost--rich h2 + h3.entry {
  margin-top: 0.4em;
  padding-top: 0;
  border-top: 0;
}

/* "In this post" (shortcode toc). */
.post-toc {
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.post-toc__title,
.callout__title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blogpost--rich .post-toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: 32px;
}

.blogpost--rich .post-toc li {
  margin: 0 0 4px;
  font-size: 1.6rem;
  break-inside: avoid;
}

/* Titled boxes (shortcode callout). */
.callout {
  margin-top: 1.4em;
  margin-bottom: 1.8em;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.callout--answer {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  border-left: 4px solid var(--primary);
}

.callout--answer .callout__title {
  color: var(--primary);
}

.blogpost--rich .callout p,
.blogpost--rich .callout li {
  font-size: 1.7rem;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* "Where it beats PrunePic" and "Keep in mind", side by side (shortcode tradeoffs). */
.blogpost--rich .tradeoffs ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
}

.blogpost--rich .tradeoffs li {
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border-top: 3px solid var(--muted);
  font-size: 1.6rem;
  line-height: 1.55;
}

.blogpost--rich .tradeoffs li:first-child {
  border-top-color: var(--primary);
}

.blogpost--rich .tradeoffs li:only-child {
  grid-column: 1 / -1;
}

.blogpost--rich .tradeoffs li > strong:first-child {
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .blogpost--rich .tradeoffs ul {
    grid-template-columns: 1fr;
  }

  .blogpost--rich .post-toc ol {
    columns: 1;
  }

  .blogpost--rich h2 {
    font-size: 2.5rem;
  }

  .blogpost--rich h3.entry {
    font-size: 2.2rem;
  }
}

/* Tables: readable on desktop, scroll sideways on phones instead of squeezing. */
.blogpost--rich table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0 2em;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  line-height: 1.45;
}

.blogpost--rich thead th {
  background: var(--surface-soft);
  color: var(--heading);
  font-weight: 600;
}

.blogpost--rich th,
.blogpost--rich td {
  padding: 11px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  min-width: 80px;
}

.blogpost--rich tbody tr:last-child td {
  border-bottom: 0;
}

.blogpost--rich tbody td:first-child {
  min-width: 120px;
  font-weight: 600;
  color: var(--heading);
}

.blogpost--rich tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-soft) 45%, transparent);
}

/* Wide screens: a real table, exactly as wide as the column (cells wrap instead of widening it). */
@media (min-width: 900px) {
  .blogpost--rich table {
    display: table;
    table-layout: auto;
  }
}

/* Figures with captions (Hugo's figure shortcode). */
.blogpost--rich figure {
  margin: 2em 0;
}

.blogpost--rich figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.blogpost--rich figcaption {
  margin-top: 0.7em;
  font-size: 1.45rem;
  color: var(--muted);
  text-align: center;
}

.blogpost--rich figcaption p {
  margin: 0;
  font-size: inherit;
}

/* Callouts: Markdown blockquotes. */
.blogpost--rich blockquote {
  margin: 1.8em 0;
  padding: 16px 20px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
  font-size: 1.65rem;
}

.blogpost--rich blockquote p:last-child {
  margin-bottom: 0;
}

/* App cards (shortcode app-card): best-for line, stat tiles, price and free version. */
.app-card {
  margin: 1.2em 0 1.6em;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-grad);
  box-shadow: var(--shadow);
}

.app-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.app-card__icon {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

/* Entry header: icon beside the numbered name (the h3), then the App Store title and subtitle. */
.blogpost--rich .app-card--entry {
  margin-top: 2.6em;
}

.blogpost--rich h2 + .app-card--entry {
  margin-top: 0.8em;
}

.blogpost--rich .app-card__name {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  scroll-margin-top: 90px;
}

/* The App Store subtitle, in the text face and the secondary colour. */
.blogpost--rich .app-card__subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.3;
}

.app-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.app-card__stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.app-card__stats dd {
  margin: 2px 0 0;
  color: var(--heading);
  font-size: 2.2rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.app-card__stats dt {
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-card__facts {
  margin: 16px 0 18px;
}

.app-card__facts div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.app-card__facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 650;
}

.app-card__facts dt svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-card__facts dd {
  margin: 0;
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1.45;
}

.app-card__link {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  font-size: 1.45rem;
  font-weight: 650;
}

.app-card__link:hover,
.app-card__link:focus {
  background: var(--nav-cta-hover);
  color: var(--nav-cta-text);
  text-decoration: none;
}

@media (max-width: 600px) {
  .app-card {
    padding: 16px;
  }

  .app-card__head {
    align-items: flex-start;
    gap: 14px;
  }

  .app-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  .blogpost--rich .app-card__name {
    font-size: 2.3rem;
  }

  .blogpost--rich .app-card__subtitle {
    font-size: 1.6rem;
  }

  .app-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-card__facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Keep cards, figures, callouts and tables centred on the reading column
   (their own margin rules above would otherwise pin them to the left). */
.blogpost--rich > figure,
.blogpost--rich > blockquote,
.blogpost--rich > .app-card,
.blogpost--rich > .callout,
.blogpost--rich > .tradeoffs,
.blogpost--rich > .post-toc {
  margin-left: auto;
  margin-right: auto;
}

.blogpost--rich > table {
  max-width: var(--post-col);
  margin-left: auto;
  margin-right: auto;
}


/* Carousel (shortcode carousel + slide, script js/blog-carousel.js). It bleeds past the text column
   to the edges of the post card: the current slide lines up with the column, the next one peeks,
   half faded, on the right (and the previous one on the left). Without the script the slides
   scroll sideways. --carousel-pad is the space from the card's edge to the column. */
.blogpost--rich .carousel {
  --carousel-pad: max(18px, calc((100% - var(--post-col)) / 2));
  --carousel-slide: min(var(--post-col), calc(100% - 84px));
  max-width: none;
  margin: 2em -26px;
}

@media (max-width: 991px) {
  .blogpost--rich .carousel {
    margin-left: -18px;
    margin-right: -18px;
  }
}

.carousel__dots {
  padding: 0 var(--carousel-pad);
}

.carousel__viewport {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel--ready .carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: 16px;
  padding-left: var(--carousel-pad);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carousel__track--instant {
  transition: none;
}

.carousel__slide {
  flex: 0 0 var(--carousel-slide);
  scroll-snap-align: center;
}

.carousel--ready .carousel__slide {
  opacity: 0.4;
  transition: opacity 0.7s ease;
  cursor: pointer;
}

.carousel--ready .carousel__slide.is-active {
  opacity: 1;
  cursor: default;
}

.blogpost--rich .carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.blogpost--rich .carousel__caption {
  margin: 0.7em 0 0;
  color: var(--muted);
  font-size: 1.45rem;
  text-align: center;
}

.carousel__arrow {
  position: absolute;
  top: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  /* Vertically centred on the image: a % margin is relative to the carousel's width. */
  margin-top: calc(var(--carousel-slide) / 3 - 20px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 17, 31, 0.6);
  color: #fff;
  cursor: pointer;
}

.carousel--ready .carousel__arrow {
  display: grid;
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
  background: rgba(10, 17, 31, 0.85);
}

.carousel__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel__arrow--prev {
  left: calc(var(--carousel-pad) + 12px);
}

.carousel__arrow--next {
  left: calc(var(--carousel-pad) + var(--carousel-slide) - 52px);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: width 0.3s ease;
}

.carousel__dot[aria-current="true"] {
  width: 22px;
  border-radius: 999px;
  background: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .carousel--ready .carousel__slide {
    transition: none;
  }
}