/* ==========================================================================
   Inner pages (shared)
   Page hero + breadcrumbs, jump links, rich text (.prose), full bleed media,
   index cards, "other" links and the closing contact band.
   Pages set their colour with .accent--red / --orange / --blue (base.css).
   ========================================================================== */

/* ---- Hero ---- */
.page-hero {
  padding-block: var(--space-10) var(--space-11);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-gray-300);
}

.breadcrumbs a {
  transition: color var(--duration-fast) ease;
}

.breadcrumbs a:hover {
  color: var(--color-black);
}

.breadcrumbs [aria-current] {
  color: var(--color-black);
}

.page-hero__grid {
  align-items: end;
  row-gap: var(--space-6);
  margin-top: var(--space-10);
}

.page-hero__main {
  grid-column: 1 / span 7;
}

.page-hero__side {
  grid-column: 9 / span 4;
  color: var(--color-gray-700);
}

.page-hero__label {
  color: var(--accent-text, var(--color-gray-500));
}

.page-hero__title {
  margin-top: var(--space-4);
}

.page-hero__title .mark,
.page-title-mark {
  background-image: linear-gradient(var(--accent, var(--color-brand-orange)), var(--accent, var(--color-brand-orange)));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.2em;
  animation: page-mark 900ms var(--ease-out) 300ms backwards;
}

@keyframes page-mark {
  from { background-size: 0% 0.2em; }
}

/* Jump links ("on this page") */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-9);
}

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.jump a:hover {
  color: var(--color-black);
  border-color: var(--accent, var(--color-black));
}

/* ---- Full bleed media ---- */
.page-media {
  position: relative;
  height: clamp(320px, 42vw, 640px);
  margin: 0;
  overflow: hidden;
  background: var(--color-gray-100);
}

.page-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Rich text from HugeRTE ---- */
.prose {
  max-width: 68ch;
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-700);
}

.prose > * + * {
  margin-top: var(--space-5);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-9);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  letter-spacing: -0.01em;
}

.prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.prose h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.prose h4 { font-size: var(--fs-body-xl); }

.prose > :first-child {
  margin-top: 0;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: var(--space-3);
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--accent, var(--color-brand-blue));
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--color-black);
}

/* ---- Section heading row used on inner pages ---- */
.page-section-title {
  color: var(--color-gray-500);
}

/* ---- "Other" links: big text rows with an arrow ---- */
.other-links {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-gray-200);
}

.other-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.other-link__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  transition: color var(--duration-fast) ease, transform 500ms var(--ease-out);
}

.other-link__text {
  flex: 1;
  max-width: 44ch;
  color: var(--color-gray-500);
}

.other-link .btn__arrow {
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform var(--duration-base) var(--ease-out);
}

.other-link:hover .other-link__name {
  color: var(--link-accent, var(--color-brand-blue));
  transform: translateX(var(--space-2));
}

.other-link:hover .btn__arrow {
  transform: translateX(6px);
}

/* ---- Contact band (end of inner pages) ---- */
.contact-band {
  background: var(--color-gray-100);
}

.contact-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
  padding-block: var(--space-12);
}

.contact-band__title {
  max-width: 22ch;
}

/* ---- Tablet / mobile ---- */
@media (max-width: 1024px) {
  .page-hero__main,
  .page-hero__side {
    grid-column: 1 / -1;
  }

  .page-hero__grid {
    margin-top: var(--space-8);
  }

  .other-link__text {
    display: none;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-block: var(--space-8) var(--space-9);
  }

  .jump {
    margin-top: var(--space-7);
  }

  .prose {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .contact-band__inner {
    padding-block: var(--space-10);
  }

  .contact-band .btn {
    width: 100%;
  }
}

/* ---- Media frame with carousel ---- */
.page-media {
  --carousel-accent: var(--accent, var(--color-brand-blue));
}

/* ---- Editor content sections (image / video / text) ---- */
.content-sections {
  display: grid;
  gap: var(--space-12);
}

.content-section {
  display: grid;
  gap: var(--space-7);
}

.content-section__image,
.content-section__video {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.content-section__image {
  aspect-ratio: 16 / 10;
}

.content-section__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-section__video {
  aspect-ratio: 16 / 9;
  background: var(--color-pitch-black);
}

.content-section__video iframe,
.content-section__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.content-section__video-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid var(--accent, var(--color-brand-blue));
}

.content-section__video-link .btn__arrow {
  width: 14px;
  height: 14px;
}

.content-section__text {
  max-width: 68ch;
}

@media (max-width: 640px) {
  .content-sections {
    gap: var(--space-10);
  }

  .content-section {
    gap: var(--space-5);
  }
}

/* ---- Simple content pages (privacy, terms) ---- */
.page-simple__title {
  max-width: 20ch;
  margin-top: var(--space-8);
}

.page-simple__updated {
  margin-top: var(--space-4);
  color: var(--color-gray-500);
}

.page-hero--simple {
  border-bottom: 1px solid var(--color-gray-200);
}

.page-simple__body {
  padding-top: var(--space-10);
}

/* ---- FAQ accordion (native <details>) ---- */
.faq {
  border-top: 1px solid var(--color-gray-200);
}

.faq__inner {
  align-items: start;
  row-gap: var(--space-8);
}

.faq__head {
  grid-column: 1 / span 4;
}

.faq__title {
  margin-top: var(--space-4);
  max-width: 14ch;
}

.faq__more {
  margin-top: var(--space-5);
  color: var(--color-gray-700);
}

.faq__more a {
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  border-bottom: 2px solid var(--accent, var(--color-brand-blue));
}

.faq__list {
  grid-column: 6 / -1;
  border-top: 1px solid var(--color-gray-200);
}

.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) ease;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover {
  color: var(--accent-text, var(--color-brand-blue));
}

.faq-item__q:focus-visible {
  outline-offset: 4px;
}

/* Plus turns into a cross when open */
.faq-item__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent-text, var(--color-black));
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__a {
  padding-bottom: var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Smooth open/close where supported; other browsers open instantly */
@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }

  .faq-item[open]::details-content {
    height: auto;
  }
}

@media (max-width: 1024px) {
  .faq__head,
  .faq__list {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .faq-item__q {
    padding-block: var(--space-5);
    font-size: var(--fs-body-xl);
  }
}

/* ---- Rich text: everything the full editor can produce ---- */
.prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  color: var(--color-black);
  border-left: 3px solid var(--accent, var(--color-brand-blue));
}

.prose hr {
  margin: var(--space-9) 0;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.prose figure {
  margin: var(--space-7) 0;
}

.prose figure.image {
  display: table;
  max-width: 100%;
}

.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

.prose code {
  padding: 0.1em 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-gray-100);
  border-radius: 4px;
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-gray-100);
  background: var(--color-pitch-black);
  border-radius: var(--radius-sm);
}

.prose pre code {
  padding: 0;
  color: inherit;
  background: none;
}

/* Tables scroll sideways on small screens instead of breaking the layout */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--color-gray-200);
}

.prose th,
.prose thead td {
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  background: var(--color-gray-50);
}

/* Embedded video (media plugin) keeps 16:9 */
.prose iframe,
.prose video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-sm);
}

.prose .mce-preview-object,
.prose span[data-mce-object] {
  display: block;
}

/* Accordion plugin output: <details class="mce-accordion"> */
.prose details {
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
}

.prose details + details {
  border-top: 0;
}

.prose summary {
  padding-block: var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  cursor: pointer;
}

.prose details > :not(summary) {
  margin-bottom: var(--space-4);
}

.prose sup,
.prose sub {
  line-height: 0;
}

.prose [dir="rtl"] {
  text-align: right;
}