/* =========================================================================
   OffPlan Insider - guide shell

   The rail sits on the RIGHT. Putting it on the left indented every text
   band by the rail width, which left a 230px empty gutter beside the
   headline where the rail had not started yet. On the right that same space
   reads as margin, and the headline, hero, body copy and pagination all
   start at the page gutter together.

   One measure throughout: the article column IS the measure, so nothing is
   narrower than it and nothing is wider.
   ========================================================================= */

.opi-guide {
  /* Matches the site container. Header and footer are both 1200px with a
     24px root gutter, so the article shares their left and right edges. */
  --g-shell: 1200px;
  --g-text: 720px;
  --g-rail: 260px;
  --g-gap: var(--space-16);
  --g-gutter: var(--space-6);

  padding-inline: 0;
}

.opi-guide > * { margin-block: 0; }

/* ============================================================== masthead */
.opi-masthead {
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-10) 0 0;
}

.opi-masthead__inner {
  max-width: var(--g-shell);
  margin: 0 auto;
  padding-inline: var(--g-gutter);
}

/* Every band in the masthead shares the article measure and the page
   gutter, so the headline and the body copy below start at the same x. */
.opi-masthead .opi-breadcrumbs,
.opi-masthead__body,
.opi-masthead__meta,
.opi-masthead__figure {
  max-width: var(--g-text);
  margin-inline: 0;
}

/* ------------------------------------------------------------ breadcrumb */
.opi-masthead .opi-breadcrumbs { margin-bottom: var(--space-6); }
.opi-masthead .opi-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: .04em;
  color: var(--text-3);
}
.opi-masthead .opi-breadcrumbs li { display: flex; align-items: baseline; gap: var(--space-2); }
.opi-masthead .opi-breadcrumbs li + li::before { content: "/"; color: var(--gray-300); }
.opi-masthead .opi-breadcrumbs a { color: var(--text-3); text-decoration: none; }
.opi-masthead .opi-breadcrumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.opi-masthead .opi-breadcrumbs [aria-current] { color: var(--text-2); }

/* --------------------------------------------------------------- eyebrow */
.opi-masthead__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.opi-masthead__kicker a { color: inherit; text-decoration: none; }
.opi-masthead__kicker a:hover { text-decoration: underline; text-underline-offset: 4px; }
.opi-masthead__kicker::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex: none; }

/* ----------------------------------------------------------------- title */
.opi-masthead__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -.026em;
  color: var(--text-1);
  text-wrap: balance;
  margin: 0;
}

.opi-masthead__dek {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
  margin: var(--space-5) 0 0;
}

/* --------------------------------------------------------------- byline */
.opi-masthead__meta {
  margin-top: var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.opi-byline { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.opi-byline__mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
}

.opi-byline__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opi-byline__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.opi-byline__name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  text-decoration: none;
  line-height: 1.3;
}
.opi-byline__name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.opi-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-3);
}
.opi-dates > div { display: flex; align-items: baseline; gap: var(--space-2); }
.opi-dates dt {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.opi-dates dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

.opi-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--sapphire-200);
  background: var(--sapphire-100);
  color: var(--sapphire-700);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.opi-verified:hover { background: var(--sapphire-200); color: var(--sapphire-700); text-decoration: none; }
.opi-verified svg { flex: none; }
@media (max-width: 860px) { .opi-verified { margin-left: 0; } }

/* ---------------------------------------------------------------- figure */
/* Longhand, not the margin shorthand. The shorthand was resetting the
   inline margins set above and pulling the hero out of the column. */
.opi-masthead__figure { margin-top: var(--space-10); margin-bottom: 0; }
.opi-masthead__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 46%;
}
.opi-masthead__credit {
  margin: var(--space-3) 0 var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  color: var(--text-3);
}

/* ================================================================= shell */
.opi-guide__shell {
  max-width: var(--g-shell);
  margin: 0 auto;
  padding-inline: var(--g-gutter);
  padding-block: var(--space-12) 0;
}
.opi-guide__shell > * { margin-block: 0; }

@media (min-width: 1080px) {
  .opi-guide__shell {
    display: grid;
    grid-template-columns: minmax(0, var(--g-text)) var(--g-rail);
    justify-content: space-between;
    column-gap: var(--g-gap);
    align-items: start;
  }
  /* Contents stays first in the document for assistive technology and
     sits second on screen. */
  .opi-guide__rail { grid-column: 2; grid-row: 1; }
  .opi-guide__col  { grid-column: 1; grid-row: 1; }
}

/* ---------------------------------------------------------------- rail */
.opi-guide__rail { min-width: 0; }

@media (min-width: 1080px) {
  .opi-guide__rail {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--space-6);
    scrollbar-width: thin;
  }
}

.opi-rail__title {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-900);
}

.opi-rail__list { list-style: none; margin: 0; padding: 0; }
.opi-rail__item { margin: 0; }

.opi-rail__item a {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-1);
  align-items: baseline;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 1px solid var(--border-1);
  color: var(--text-3);
  font-size: .8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.opi-rail__item a:hover { color: var(--text-1); border-left-color: var(--gray-400); text-decoration: none; }

.opi-rail__num {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}

.opi-rail__item.is-current a { color: var(--text-1); border-left-color: var(--accent); font-weight: var(--weight-medium); }
.opi-rail__item.is-current .opi-rail__num { color: var(--accent); }

/* Disclosure below the rail breakpoint. */
.opi-rail__mobile { margin: 0 0 var(--space-10); border-block: 1px solid var(--border-1); }
.opi-rail__mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.opi-rail__mobile > summary::-webkit-details-marker { display: none; }
.opi-rail__mobile > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease-out);
}
.opi-rail__mobile[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.opi-rail__mobile .opi-rail__list { padding-bottom: var(--space-4); }

@media (min-width: 1080px) { .opi-rail__mobile { display: none; } }
@media (max-width: 1079px) { .opi-guide__rail > .opi-rail--desktop { display: none; } }
@media (prefers-reduced-motion: reduce) { .opi-rail__mobile > summary::after { transition: none; } }

/* ================================================================ column */
.opi-guide__col { min-width: 0; }
.opi-guide__col .entry-content > * { max-width: none; margin-inline: 0; }

/* A wider container earns larger type. 17px across a 720px measure runs to
   roughly 85 characters a line, which is past comfortable. */
.opi-guide__col .entry-content > p,
.opi-guide__col .entry-content > ul,
.opi-guide__col .entry-content > ol { font-size: 1.125rem; line-height: 1.7; }

.opi-guide__col .entry-content .opi-figure,
.opi-guide__col .entry-content figure.wp-block-image,
.opi-guide__col .entry-content .wp-block-table,
.opi-guide__col .entry-content .opi-facts,
.opi-guide__col .entry-content .opi-report-cta,
.opi-guide__col .entry-content .opi-cta,
.opi-guide__col .entry-content .opi-form-wrap {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.opi-guide__col .entry-content img { max-width: 100%; height: auto; }
.opi-guide__col .entry-content figcaption { max-width: none; }

/* ====================================================== border breathing */
.opi-guide__col .entry-content .opi-answer {
  padding: var(--space-6) var(--space-8);
  border-left-width: 3px;
}
.opi-guide__col .entry-content figcaption,
.opi-guide__col .entry-content .wp-element-caption { padding-left: var(--space-5); }

.opi-guide__col .entry-content .opi-faq { padding-top: var(--space-10); }
.opi-guide__col .entry-content .opi-faq summary { padding: var(--space-5) var(--space-2) var(--space-5) 0; }
.opi-guide__col .entry-content .opi-faq details > *:not(summary) { padding-right: var(--space-10); }
.opi-guide__col .entry-content .opi-eeat { padding-top: var(--space-10); }
.opi-guide__col .entry-content > h2 { padding-top: var(--space-10); }

.opi-guide__col .entry-content table th { padding-bottom: var(--space-4); }
.opi-guide__col .entry-content table td { padding-block: var(--space-4); }

.opi-guide__col .entry-content .opi-cta { padding: var(--space-10) var(--space-8); }
.opi-guide__col .entry-content .opi-cta p,
.opi-guide__col .entry-content .opi-cta h2 { padding-right: 0; }

/* ============================================================ pagination */
.opi-guide__pagination {
  box-sizing: border-box;
  width: min(100% - (var(--g-gutter) * 2), var(--g-text));
  margin-inline: auto;
  padding-inline: 0;
}
@media (min-width: 1080px) {
  /* Left edge locked to the shell so the pair sits under the article column
     rather than centred on the page. */
  .opi-guide__pagination {
    margin-left: max(var(--g-gutter), calc(50% - (var(--g-shell) / 2) + var(--g-gutter)));
    margin-right: auto;
  }
}

/* Anchor targets clear the sticky site header. */
.opi-guide :is(h2, h3)[id] { scroll-margin-top: 96px; }

/* Methodology note under the source list. */
.opi-method {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
  font-size: var(--text-caption);
  line-height: 1.65;
  color: var(--text-3);
}
.opi-reviewed a { color: var(--text-2); border-bottom: 1px solid var(--border-2); text-decoration: none; }
.opi-reviewed a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ================================================================ mobile */
@media (max-width: 1079px) {
  .opi-guide__shell,
  .opi-masthead__inner { max-width: calc(var(--g-text) + (var(--g-gutter) * 2)); }
  .opi-guide__shell { padding-block: var(--space-10) 0; }
}
@media (max-width: 640px) {
  .opi-guide { --g-gutter: var(--space-5); }
  .opi-guide__col .entry-content .opi-answer { padding: var(--space-5); }
  .opi-guide__col .entry-content .opi-cta { padding: var(--space-8) var(--space-5); }
}