/* ==========================================================================
   About, Packages, Articles and Patient stories.

   The four sections added on 2026-08-08. They reuse the existing card, prose,
   fact-card and CTA components wherever one already fitted — this file holds
   only what is genuinely new, which is the composition of each listing and the
   two reading layouts.

   Every animation lives in animation.css, per the rule at the top of that file:
   composition here, motion there.
   ========================================================================== */

/* --- Shared: a quiet "see everything" link -------------------------------- */
/* Used at the foot of a capped list — the About page's four sections and the
   related blocks on the two reading pages. It is a link, not a button: it is
   the secondary way out of a section, and a second filled button beside the
   real call to action dilutes it. */

.about-more {
  margin: 0;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.link-more::after {
  /* Logical, so it mirrors under `dir="rtl"` with the rest of the layout. */
  content: '→';
  transition: translate var(--transition-fast);
}

.link-more:hover::after {
  translate: 3px 0;
}

[dir='rtl'] .link-more::after {
  content: '←';
}

[dir='rtl'] .link-more:hover::after {
  translate: -3px 0;
}

/* ==========================================================================
   About
   ========================================================================== */

.about-body {
  display: grid;
  gap: var(--stack);
}

/* --- The journey, as a numbered ladder ------------------------------------ */
/* A numbered list is the honest element here: the steps happen in an order and
   an <ol> says so to a screen reader without any extra markup. The visible
   numeral is decorative and hidden from assistive technology, because the list
   already announces its own numbering. */

.about-journey {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: none;
}

.about-journey__step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.about-journey__number {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.about-journey__title {
  font-size: var(--fs-h4);
}

.about-journey__body {
  color: var(--color-text-muted);
}

/* --- What we arrange ------------------------------------------------------ */

/* `--stack`, not a smaller gap of its own. The shared stack token is the
   site-wide card rhythm and CLAUDE.md treats a tighter local value as a
   defect — the client has reported cards sitting too close before. */
.about-services {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-services__link {
  display: grid;
  gap: var(--space-2);
  block-size: 100%;
  align-content: start;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.about-services__link:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.about-services__title {
  font-size: var(--fs-body);
  font-weight: 700;
}

.about-services__body {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* --- Where we work -------------------------------------------------------- */

.about-places {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-places__link {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
}

.about-places__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.about-places__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.about-places__link:hover .about-places__media img {
  /* Transform only, so nothing reflows (§12). */
  transform: scale(1.05);
}

.about-places__name {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
}

/* ==========================================================================
   Packages
   ========================================================================== */

.package-grid {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.package-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.package-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.package-card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.package-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.package-card:hover .package-card__media img {
  transform: scale(1.04);
}

.package-card__text {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
}

.package-card__eyebrow {
  color: var(--color-primary);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.package-card__title a {
  color: inherit;
  text-decoration: none;
}

.package-card__title a:hover {
  color: var(--color-primary);
}

.package-card__body {
  color: var(--color-text-muted);
}

/* Days, never money. The site publishes no treatment cost until the client
   confirms it, and the length of the trip is what a patient plans around. */
.package-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.package-card__facts dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.package-card__facts dd {
  margin: 0;
  font-weight: 700;
}

.package-card__more {
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-small);
}

/* --- Included / not included --------------------------------------------- */
/* Two blocks with the same shape and different accents, because "what you get"
   and "what you do not" are read together and must be distinguishable at a
   glance — by more than colour, hence the differing border weight and the
   heading, which carries the meaning in words. */

.package-list {
  display: grid;
  gap: var(--space-3);
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.package-list--in {
  border-inline-start: 3px solid var(--color-accent);
}

.package-list--out {
  border-inline-start: 3px solid var(--color-border);
}

.package-list__title {
  font-size: var(--fs-h4);
}

.package-shared {
  display: grid;
  gap: var(--space-3);
  padding: clamp(18px, 2vw, 26px);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.package-shared__title {
  font-size: var(--fs-h4);
}

.package-shared__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.package-shared__list a {
  color: var(--color-text);
  text-decoration: none;
  border-block-end: 1px solid var(--color-border);
}

.package-shared__list a:hover {
  color: var(--color-primary);
  border-block-end-color: var(--color-accent);
}

/* ==========================================================================
   Articles and patient stories — listings
   ========================================================================== */

.article-grid,
.story-grid {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.article-card,
.story-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.article-card:hover,
.story-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/* The whole card is the link. One target rather than a title link with dead
   space around it — on a touch screen the dead space is most of the card. */
.article-card__link,
.story-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  block-size: 100%;
  color: inherit;
  text-decoration: none;
}

.article-card__media,
.story-card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.article-card__media img,
.story-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.article-card:hover .article-card__media img,
.story-card:hover .story-card__media img {
  transform: scale(1.04);
}

.article-card__text,
.story-card__text {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
}

.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.article-card__tag {
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-card__title,
.story-card__title {
  font-size: var(--fs-h4);
}

.article-card:hover .article-card__title,
.story-card:hover .story-card__title {
  color: var(--color-primary);
}

.article-card__body,
.story-card__body {
  color: var(--color-text-muted);
}

.article-card__more,
.story-card__more {
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-small);
}

.story-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.story-card__facts dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-card__facts dd {
  margin: 0;
  font-weight: 600;
}

/* ==========================================================================
   Articles and patient stories — reading pages
   ========================================================================== */

/* No side rail. An enquiry form pinned beside something somebody is reading
   for information is what makes them leave; the call to action is at the end,
   where they have finished. The column is therefore centred and measured. */

.article-page {
  display: grid;
  gap: var(--stack);
}

.article-body {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
  margin-inline: auto;
  inline-size: 100%;
}

.article-body__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body__updated {
  color: var(--color-primary);
}

.article-related {
  display: grid;
  gap: var(--space-5);
  padding-block-start: var(--space-7);
  border-block-start: 1px solid var(--color-border);
}

.story-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  padding: clamp(16px, 1.8vw, 22px);
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.story-facts dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-facts dd {
  margin: 0;
  font-weight: 700;
}

/* Consent, stated on the page. Quiet, because it is a fact about how the story
   came to be here rather than part of the story. */
.story-consent {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   Search results

   One flat, relevance-ordered list with a type badge per row — not one group
   per record type, because a visitor searching "knee" wants the best match
   first, not eleven headings to scan. The whole card is the tap target: the
   title link is stretched over the row, which also carries the 44px floor
   (§45) without inflating the text.
   ========================================================================== */

.search-form__label {
  display: block;
  margin-block-end: var(--space-2);
  font-weight: 600;
}

.search-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.search-form__input {
  flex: 1;
  min-width: min(280px, 100%);
  min-height: 46px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.search-form__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.search-note,
.search-count {
  margin: 0;
  color: var(--color-text-muted);
}

.search-results {
  /* A wrapper around cards must re-establish the stack gap — a plain block
     silently collapses it. */
  display: grid;
  gap: var(--stack);
  padding: 0;
  margin: 0;
}

.search-result {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-result:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.search-result__type {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-result__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.search-result__title a {
  color: var(--color-text);
  text-decoration: none;
}

/* Stretch the link over the card: the row is the target, so the 44px floor
   comes from the card's own padding rather than from oversized type. */
.search-result__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.search-result:hover .search-result__title a {
  color: var(--color-primary);
}

.search-result__body {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}