/**
 * Resource Details page. Loaded only on single jdev_resource.
 */

.resource-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-4);
}

.resource-detail__main { min-width: 0; }

.resource-detail__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(64px + var(--space-4));
}

/* The inline copy of the download card exists for the mobile reading
   order only; the sticky rail owns it on desktop. Exactly one shows. */
.rd-aside-inline { display: none; }

/* ---- Hero ---- */
.rd-hero { display: flex; gap: var(--space-6); align-items: flex-start; }

.rd-hero__thumb {
  position: relative;
  flex: 0 0 96px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
}
.rd-hero__thumb-img { width: 100%; height: 100%; object-fit: cover; }
.rd-hero__thumb-icon { width: 48px; height: 48px; opacity: .85; }
.rd-hero__thumb-format {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: calc(100% - var(--space-6));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.92);
  color: var(--color-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.rd-hero__body { flex: 1; min-width: 0; }
.rd-hero__title {
  margin: var(--space-2) 0;
  font-size: var(--fs-3xl);
  overflow-wrap: anywhere;
}
.rd-hero__desc { color: var(--color-text-muted); margin: 0 0 var(--space-3); max-width: 62ch; }

.rd-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.rd-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
a.rd-metric:hover { color: var(--color-ink); }
.rd-metric strong { color: var(--color-ink); }

/* ---- Stars ---- */
.jdev-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.jdev-stars__empty { color: var(--color-border); }
.jdev-stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #F59E0B;
}

/* ---- Cards ---- */
.rd-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.rd-card__title { margin: 0 0 var(--space-4); font-size: var(--fs-base); }

.rd-download__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.rd-download__file-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: #DC2626;
}
.rd-download__file-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-download__file-meta strong { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rd-download__file-meta span { font-size: var(--fs-xs); color: var(--color-text-muted); }

.rd-download__cta { width: 100%; justify-content: center; min-height: 48px; }
.rd-download__save { margin-top: var(--space-3); }

.rd-download__unavailable {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin: 0;
}

.rd-download__secure {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-positive);
}

/* ---- Tabs ---- */
.rd-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-8) 0 var(--space-6);
  overflow-x: auto;
}
.rd-tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.rd-tab.is-active { color: var(--color-secondary-text); border-bottom-color: var(--color-secondary); font-weight: var(--fw-semibold); }

/* Without JS every panel stays visible (no .is-active toggling runs),
   which is the intended no-JS fallback: one long readable page. */
/* Panels are all visible by default — that is the deliberate no-JS
   fallback (one long readable page, nothing unreachable).
   resource-details.js adds .is-tabbed to the page root once it has
   taken over, and only then does the tab strip actually filter. Without
   this pair the strip toggled a class nothing responded to, so every
   tab's content rendered at once. */
.rd-panel + .rd-panel { margin-top: var(--space-10); }

.resource-detail.is-tabbed .rd-panel { display: none; }
.resource-detail.is-tabbed .rd-panel.is-active { display: block; }
.resource-detail.is-tabbed .rd-panel + .rd-panel { margin-top: 0; }
.rd-panel__title { font-size: var(--fs-xl); margin: 0 0 var(--space-4); }

.rd-prose { max-width: 72ch; }
.rd-prose.is-clamped {
  max-height: 11em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.rd-highlights { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rd-highlights li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); }
.rd-highlights svg { color: var(--color-positive); flex-shrink: 0; margin-top: 3px; }

/* ---- Preview ---- */
.rd-preview__video, .rd-preview__image { width: 100%; border-radius: var(--radius-lg); display: block; }
.rd-preview__strip {
  display: flex; gap: var(--space-3);
  overflow-x: auto; padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}
.rd-preview__frame {
  flex: 0 0 200px;
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rd-preview__frame img { width: 100%; height: 150px; object-fit: cover; display: block; }

.rd-preview__none {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}
.rd-preview__none svg { width: 32px; height: 32px; color: var(--color-border); }
.rd-preview__none p { margin: var(--space-2) 0 0; }

/* ---- Metadata ---- */
.rd-meta { margin: 0; }
.rd-meta__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-sm);
}
.rd-meta__row:last-child { border-bottom: none; }
.rd-meta dt { color: var(--color-text-muted); margin: 0; }
.rd-meta dd { margin: 0; font-weight: var(--fw-medium); text-align: right; }
.rd-meta__author { display: flex; align-items: center; gap: var(--space-2); }
.rd-meta__author img { border-radius: 999px; }

/* ---- Share ---- */

.rd-share__url {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.rd-share__url input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-3);
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  /* The URL is long and the rail is narrow — ellipsis rather than a
     scrollbar, since the field selects its whole value on click. */
  text-overflow: ellipsis;
}
.rd-share__url .btn { flex-shrink: 0; white-space: nowrap; }

.rd-share__native { width: 100%; justify-content: center; margin-top: var(--space-3); }

.rd-share__label {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Equal columns keep the icons on a strict grid; align-items:start
   stops a two-line label (none today, but translations wrap) from
   dragging its neighbours' icons out of line. */
.rd-share {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.rd-share__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  min-width: 0;
}
.rd-share__btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-share__btn svg {
  box-sizing: content-box;
  width: 18px; height: 18px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-white);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Each network takes its own brand colour on hover — a row of five
   identical grey circles gives no signal about what you're clicking. */
.rd-share__btn:hover svg { color: var(--color-white); border-color: transparent; }
.rd-share__btn--linkedin:hover svg { background: #0A66C2; }
.rd-share__btn--x:hover svg        { background: #000000; }
.rd-share__btn--facebook:hover svg { background: #1877F2; }
.rd-share__btn--whatsapp:hover svg { background: #25D366; }
.rd-share__btn--email:hover svg    { background: var(--color-primary); }
.rd-share__btn:hover { color: var(--color-ink); }
.rd-share__btn:focus-visible svg { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

.rd-share__status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-positive);
  min-height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .rd-share__btn svg { transition: none; }
}

/* ---- Ratings ---- */
.rd-rating-summary {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.rd-rating-summary__score { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.rd-rating-summary__score strong { font-size: var(--fs-3xl); font-family: var(--font-heading); }
.rd-rating-summary__bars { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.rd-rating-bar { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.rd-rating-bar__label { width: 10px; color: var(--color-text-muted); }
.rd-rating-bar__track { flex: 1; height: 6px; border-radius: 999px; background: var(--color-border-soft); overflow: hidden; }
.rd-rating-bar__fill { display: block; height: 100%; background: #F59E0B; }
.rd-rating-bar__count { width: 24px; text-align: right; color: var(--color-text-muted); }

/* Star radio input: reversed row so CSS sibling selectors can fill
   every star up to the hovered/checked one. */
.rd-stars-input { border: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rd-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rd-stars-input label {
  font-size: 28px; line-height: 1; color: var(--color-border);
  cursor: pointer; padding: 0 2px;
  min-width: 32px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-stars-input input:checked ~ label,
.rd-stars-input label:hover,
.rd-stars-input label:hover ~ label { color: #F59E0B; }
.rd-stars-input input:focus-visible + label { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

.rd-review-form {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.rd-review-form__title { margin: 0 0 var(--space-3); font-size: var(--fs-base); }
.rd-review-form textarea {
  width: 100%; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-sm); resize: vertical;
  margin-bottom: var(--space-3);
}

.rd-review-gate {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.rd-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rd-review { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.rd-review__head { display: flex; align-items: center; gap: var(--space-3); }
.rd-review__head img { border-radius: 999px; }
.rd-review__head > div { flex: 1; display: flex; flex-direction: column; }
.rd-review__body { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }

/* ---- Activity ---- */
.rd-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rd-activity__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.rd-activity__icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.rd-activity__row > span:last-child { display: flex; flex-direction: column; }

.rd-related { margin-top: var(--space-10); }

/* ---- Sticky mobile CTA ---- */
.rd-sticky { display: none; }

@media (max-width: 1023px) {
  .resource-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .resource-detail__aside { position: static; width: 100%; min-width: 0; }
  /* On narrow screens the card belongs in the reading order, so the
     inline copy shows and the rail's copy is suppressed. */
  .rd-aside-inline { display: block; margin-top: var(--space-6); }
  .resource-detail__aside .rd-download { display: none; }
}

@media (max-width: 767px) {
  /* Thumbnail stays beside the title, as in the mobile reference —
     stacking it wasted most of the first screen on a cover image and
     pushed the title and download CTA below the fold. */
  .rd-hero { flex-direction: row; gap: var(--space-4); }
  .rd-hero__thumb { flex: 0 0 72px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
  .rd-hero__thumb-icon { width: 28px; height: 28px; }
  .rd-hero__thumb-format { left: 4px; bottom: 4px; padding: 1px 4px; font-size: 9px; }
  .rd-hero__title { font-size: var(--fs-xl); margin: var(--space-1) 0; }
  .rd-hero__desc { font-size: var(--fs-sm); margin-bottom: var(--space-2); }

  /* Metrics wrap rather than scroll — a horizontally scrolling strip
     of three short figures is worse than a second line. */
  .rd-hero__metrics { gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
  .rd-metric { font-size: var(--fs-xs); }

  .rd-rating-summary { flex-direction: column; gap: var(--space-4); align-items: stretch; }
  .rd-meta__row { flex-direction: column; gap: 2px; }
  .rd-meta dd { text-align: left; }

  /* The rail's Resource Details card duplicates the Details tab once
     the rail stacks into the reading order. Share stays — it is the
     only route to sharing on mobile. */
  .rd-card--details { display: none; }

  .rd-card { padding: var(--space-4); }
  .rd-panel__title { font-size: var(--fs-lg); }

  /* Nothing may exceed the viewport width. */
  .rd-hero, .rd-hero__body, .rd-prose { max-width: 100%; min-width: 0; }
  .rd-prose img, .rd-preview__video, .rd-preview__image { max-width: 100%; height: auto; }

  /* Sticky bar clears the bottom bar, so the last section needs room
     to scroll clear of it. */
  .rd-related, .resource-detail__aside { padding-bottom: var(--space-4); }
  .resource-detail { padding-bottom: 84px; }

  .rd-sticky {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    /* Clears the JDEVerse bottom nav rather than covering it, and
       respects the iOS home-indicator inset (spec §6.2). */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-header) - 1);
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }
  .rd-sticky__cta { flex: 1; justify-content: center; min-height: 48px; }

  /* Bookmark control boxed to match the CTA's height and the reference
     layout, rather than a bare icon floating beside a 48px button. */
  .rd-sticky .bookmark-form__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-white);
  }
  .rd-sticky .bookmark-form__btn.is-active {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
    border-color: var(--color-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-preview__strip { scroll-behavior: auto; }
}


/* ---- Carousels (Resource Preview, Related Resources) ---------------- */

.rd-carousel { position: relative; }

.rd-carousel__next {
  position: absolute;
  right: calc(var(--space-4) * -1);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink-soft);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 2;
}
.rd-carousel__next:hover { border-color: var(--color-secondary); color: var(--color-secondary-text); }

.rd-related__strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rd-related__strip::-webkit-scrollbar { display: none; }
.rd-related__strip > * { flex: 0 0 240px; scroll-snap-align: start; }

.rd-preview__strip::-webkit-scrollbar { display: none; }
.rd-preview__strip { scrollbar-width: none; }

.rd-showmore__chevron { transform: rotate(90deg); }

.rd-download__secure.is-verified { color: var(--color-positive); }
.rd-download__secure strong { font-weight: var(--fw-semibold); }
.rd-download__secure-sep { opacity: .5; }

@media (max-width: 1023px) {
  .rd-carousel__next { right: 0; }
}

.rd-meta__license { display: inline-flex; align-items: center; gap: var(--space-2); }
.rd-meta__info { display: inline-flex; color: var(--color-text-muted); cursor: help; }

.rd-rating-summary--empty .rd-rating-summary__score strong { color: var(--color-text-muted); }
.rd-metric--rating .jdev-stars { font-size: var(--fs-base); }

/* ---- Small mobile (≤ 380px) ----------------------------------------
   The spec calls out 320px explicitly. At that width the five share
   channels still fit, but only once their circles shrink — so they are
   trimmed rather than allowed to wrap into a ragged 3+2. */
@media (max-width: 380px) {
  .rd-share { gap: var(--space-1); }
  .rd-share__btn svg { width: 16px; height: 16px; padding: var(--space-2); }
  .rd-share__btn { font-size: 9px; }

  .rd-hero__thumb { flex: 0 0 60px; }
  .rd-hero__title { font-size: var(--fs-lg); }

  /* Two figures per line beats three cramped ones. */
  .rd-hero__metrics { gap: var(--space-2) var(--space-3); }

  .rd-share__url { flex-wrap: wrap; }
  .rd-share__url input { flex: 1 0 100%; }
  .rd-share__url .btn { width: 100%; justify-content: center; }

  .rd-sticky { padding: var(--space-2) var(--space-3); }
}

/* ---- Wide desktop --------------------------------------------------
   Keeps the reading column from stretching indefinitely on very wide
   screens (spec §21) while the rail keeps its fixed width. */
@media (min-width: 1600px) {
  .resource-detail__layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .rd-prose { max-width: 76ch; }
}


/* ---- Overflow guards ------------------------------------------------
   Nothing on this page may establish a min-content width wider than the
   viewport. Long titles, filenames, licence strings and pasted URLs are
   all realistic sources, and a single one of them pushes the whole page
   into horizontal scroll rather than just clipping itself. */
.rd-panel,
.rd-card,
.rd-hero,
.rd-hero__body,
.rd-download__file,
.rd-download__file-meta,
.rd-meta,
.rd-review,
.rd-activity__row { min-width: 0; }

.rd-panel__title,
.rd-card__title,
.rd-hero__desc,
.rd-prose,
.rd-meta dd,
.rd-review__body,
.rd-preview__none p,
.rd-download__file-meta strong { overflow-wrap: anywhere; }

/* Media never exceeds its column. */
.rd-prose img,
.rd-prose iframe,
.rd-prose table,
.rd-preview__video,
.rd-preview__image { max-width: 100%; }
.rd-prose table { display: block; overflow-x: auto; }


/* ---- Mobile overrides that MUST come last --------------------------
   These target rules defined further up the file (the carousel block).
   CSS at equal specificity is resolved by source order, so a mobile
   override placed above its base rule silently loses — which is exactly
   what happened here: Related stayed a fixed 240px strip on phones
   because its base rule was declared after the media query meant to
   change it. Keeping these at the end of the file makes the ordering
   self-evident rather than something to rediscover. */
@media (max-width: 767px) {
  .rd-related__strip {
    flex-direction: column;
    overflow-x: visible;
  }
  .rd-related__strip > * {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  .rd-related .rd-carousel__next { display: none; }

  /* Preview frames shrink so at least one full frame plus a hint of
     the next fits a 320px screen. */
  .rd-preview__frame { flex: 0 0 160px; }
  .rd-preview__frame img { height: 120px; }
}