@charset "UTF-8";
/* ==========================================================================
   Alofok s.r.o. — long-form content stylesheet
   Loaded only by pages that need it (example.php). Depends on site.css
   for tokens and base components.

   Contents
     1. Breadcrumbs
     2. Page header
     3. Chip navigation
     4. Case study layout
     5. Prose
     6. Figures
     7. Pull quotes & testimonials
     8. Timeline
     9. Comparison table
    10. Tags & meta lists
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumbs
   ----------------------------------------------------------------------- */

.breadcrumbs {
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.breadcrumbs li + li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  background: var(--line-strong);
  border-radius: 50%;
}

.breadcrumbs a {
  color: var(--ink-faint);
  text-decoration: none;
}

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

.breadcrumbs [aria-current="page"] {
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   2. Page header
   ----------------------------------------------------------------------- */

.page-head {
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-l);
}

.page-head__title {
  max-width: 20ch;
  font-size: var(--step-4);
}

.page-head__lede {
  max-width: var(--measure);
  margin-top: var(--space-m);
  font-size: var(--step-1);
}

.page-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.page-head__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.page-head__facts .icon {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   3. Chip navigation (jump links to each case)
   ----------------------------------------------------------------------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1rem;
  font-size: var(--step--1);
  font-weight: 560;
  color: var(--ink-muted);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.chip .icon {
  color: var(--brand);
}

.chip:hover,
.chip:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--brand-line);
}

/* --------------------------------------------------------------------------
   4. Case study layout
   ----------------------------------------------------------------------- */

.case {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

@media (min-width: 64rem) {
  .case {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .case__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
    align-self: start;
  }
}

.case__index {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--brand);
  opacity: 0.4;
}

.case__title {
  margin-top: var(--space-2xs);
  font-size: var(--step-3);
}

.case__lede {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  color: var(--ink-muted);
}

.case__section {
  margin-top: var(--space-l);
}

.case__section > h3 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
  color: var(--ink);
}

.case__section > h3 .icon {
  color: var(--brand);
}

.case__results {
  margin-top: var(--space-m);
}

/* --------------------------------------------------------------------------
   5. Prose
   ----------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h3,
.prose h4 {
  margin-top: 1.6em;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.3rem;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose li::marker {
  color: var(--brand);
}

.prose a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Figures
   ----------------------------------------------------------------------- */

.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.figure figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.figure--bleed img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Pull quotes & testimonials
   ----------------------------------------------------------------------- */

.pull-quote {
  position: relative;
  margin: var(--space-l) 0 0;
  padding: var(--space-m) var(--space-m) var(--space-m) var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.pull-quote::before {
  content: "";
  position: absolute;
  top: var(--space-m);
  left: var(--space-s);
  width: 1.2rem;
  height: 1.2rem;
  background: var(--brand);
  opacity: 0.35;
  /* Quotation glyph drawn as a mask so it inherits the brand colour. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 5.4c-3.2 1.5-5.1 4.3-5.1 7.7v5.5h6.5v-6.5H8.1c.1-1.9 1.1-3.3 3-4.3Zm10.1 0c-3.2 1.5-5.1 4.3-5.1 7.7v5.5h6.5v-6.5h-2.9c.1-1.9 1.1-3.3 3-4.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 5.4c-3.2 1.5-5.1 4.3-5.1 7.7v5.5h6.5v-6.5H8.1c.1-1.9 1.1-3.3 3-4.3Zm10.1 0c-3.2 1.5-5.1 4.3-5.1 7.7v5.5h6.5v-6.5h-2.9c.1-1.9 1.1-3.3 3-4.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pull-quote p {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}

.pull-quote footer {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.testimonial__stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: var(--space-xs);
  font-size: 0.95rem;
  color: var(--accent);
}

.testimonial__body {
  flex: 1 1 auto;
}

.testimonial__who {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.testimonial__who strong {
  display: block;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   8. Timeline
   ----------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  position: relative;
  padding: 0 0 var(--space-l) var(--space-l);
  border-left: 2px solid var(--line);
}

.timeline__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: -0.5rem;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--bg);
  border: 2px solid var(--brand);
  border-radius: 50%;
}

.timeline__when {
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.timeline__title {
  margin-top: 0.15rem;
  font-size: var(--step-1);
}

.timeline__item p {
  margin-top: var(--space-3xs);
}

/* --------------------------------------------------------------------------
   9. Comparison table
   ----------------------------------------------------------------------- */

.table-wrap {
  /* Wide tables scroll inside their own box; the page never scrolls sideways. */
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.data-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.data-table caption {
  padding: var(--space-s) var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: left;
  caption-side: bottom;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.data-table thead th {
  font-weight: 650;
  color: var(--ink);
  background: var(--surface-2);
  white-space: nowrap;
}

.data-table tbody th {
  font-weight: 560;
  color: var(--ink);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: rgba(9, 190, 139, 0.04);
}

.data-table .yes {
  color: var(--brand);
}

.data-table .no {
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   10. Tags & meta lists
   ----------------------------------------------------------------------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-row--tight {
  margin-top: 0.4rem;
}

.tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: rgba(167, 176, 194, 0.08);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

.meta-list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-m) 0 0;
  font-size: var(--step--1);
}

.meta-list dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.meta-list dd {
  margin: 0.1rem 0 0;
  color: var(--ink);
}