/* ==========================================================================
   AgeWell — redesigned /o-nas/ and /pro-partnery/ body layouts

   Transcribed from the PM's supplied mockups ("Layout redesign request"):
   O nas.dc.html and Pro partnery.dc.html. Every value below (type scale,
   colours, spacing, grid ratios) is taken from those files rather than
   invented, so the rendered pages match the mockups exactly.

   SCOPE: this file is loaded ONLY by the two mockup pages, and every rule is
   nested under `.rd`. It cannot reach the site header, footer, or any other
   page. The mockups deliberately did not cover header/footer, so those keep
   the existing site styling and the existing fonts.
   ========================================================================== */

.rd {
  /* COLOURS COME FROM THE SITE, NOT THE MOCKUPS.
     The mockups shipped their own near-black (#241F1D) and body grey
     (#565049). Those are replaced here by the tokens style.css already
     defines and every other page already uses, so a heading on /o-nas/ is
     the same colour as a heading anywhere else:
       headings  -> --color-near-black  (the global h1..h6 rule, style.css:103)
       body copy -> --color-text        (the global body rule, style.css:71)
       buttons   -> --color-dark        (what .btn--outline uses)
       on-image  -> --color-white       (what .partner-hero__content uses)
     Only the layout, type scale and band tints are still the mockups'. */
  --rd-ink: var(--color-near-black);
  --rd-body: var(--color-text);
  --rd-btn: var(--color-dark);
  --rd-btn-ink: var(--color-white);
  --rd-panel-ink: var(--color-white);
  --rd-panel-body: var(--color-white);
  --rd-rule: var(--color-border);
  --rd-numeral: var(--color-taupe);
  /* Page background matches the site's cream exactly. The mockups used
     #FAF8F3, two points off --color-cream, which left a faint seam where
     the site header met the page body. */
  --rd-bg: var(--color-cream);

  /* Band tints and the hero panel stay as designed. --rd-panel-rgb is the
     same colour as --color-dark, kept as a triple so the hero overlay can
     take an alpha (see .rd-split__panel). */
  --rd-panel-rgb: 60, 50, 52;
  --rd-band-blush: #F1E8E2;     /* /o-nas/ "Proč to děláme" */
  --rd-band-warm: #F3EDE6;      /* /pro-partnery/ bands */

  /* The mockups specified EB Garamond + Wix Madefor Text. The PM asked for
     the site's existing equivalents instead, so these point at the tokens
     already defined in style.css: Libre Baskerville and Inter. No webfont is
     loaded by these pages as a result. Libre Baskerville has a larger
     x-height than EB Garamond, so the mockups' display sizes read heavier
     here than in the source files. */
  --rd-serif: var(--font-heading);
  --rd-sans: var(--font-body);

  background: var(--rd-bg);
  color: var(--rd-ink);
  font-family: var(--rd-sans);
  -webkit-font-smoothing: antialiased;
}

.rd ::selection { background: #E4D6C9; }

/* 1240px content column with 64px gutters — the measure used by every
   section of both mockups. */
.rd-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
}

/* --- type ----------------------------------------------------------------
   H1 is 56px, the size 431 of the site's ~440 editorial pages already use:
   article detail, question detail and theme detail all resolve to the same
   56px clamp. Two earlier attempts at this were wrong — 45px (what the two
   live pages being replaced happen to use, an outlier on 2 pages) and 48px
   (.page-title, an outlier on 4 list pages). Volume decides, and volume is
   the detail pages. Homepage stays larger at 59-63 by design. */
.rd-h1 {
  margin: 0 0 24px;
  font-family: var(--rd-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--rd-ink);
}
.rd-lead {
  margin: 0;
  max-width: 60ch;
  font-size: 21px;
  line-height: 1.6;
  color: var(--rd-body);
  text-wrap: pretty;
}
/* The uppercase letterspaced section heading. This is the "different
   headings" treatment the PM pointed at, at the mockups' 40px, not the 14px
   label used elsewhere on the site. */
.rd-h2 {
  margin: 0 0 32px;
  font-family: var(--rd-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-ink);
}
.rd-h3 {
  margin: 0 0 18px;
  font-family: var(--rd-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.22;
  color: var(--rd-ink);
  text-wrap: pretty;
}
/* Used where the mockup letterspaces an h3 too (the /o-nas/ closing pair). */
.rd-h3--caps {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rd-p {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--rd-body);
  text-wrap: pretty;
}
.rd-p + .rd-p { margin-top: 28px; }
.rd-measure { max-width: 74ch; }
.rd-measure--wide { max-width: 78ch; }

/* --- buttons ---------------------------------------------------------------
   There is no bespoke button here any more. These pages use the site's own
   .btn / .btn--outline / .btn--dark, so they are the same size, the same
   14px Inter with normal letter-spacing, and the same invert-on-hover as
   every other button on agewell.cz. The old .rd-btn was 12px at 0.16em
   tracking with its own hover, which is why it did not match. */

/* --- split hero: the /kontakty/ panel treatment ---------------------------
   Copied from .contact-section / .contact-form in this same stylesheet so the
   two new pages read as the same site as the contact page:
     * photo is the background of the whole section, `cover`. POSITION IS SET
       PER PAGE, inline, not here. `center right` (copied from /kontakty/)
       is actively wrong for a very wide, short photo: pinning the right edge
       of a 2.88:1 image inside a tall section pushes the subject LEFT, and
       the taller the section the worse it gets (67% -> 60% -> 47% -> 33%),
       until she sits behind the panel. /kontakty/ never shows this because
       its photo is 1.74:1. See each page's inline background-position;
     * panel is 50% wide, flex, vertically centred;
     * panel tint is --color-panel-tint, the single shared value now used by
       /kontakty/ too, so all three panels are identical.
   Only the panel's type scale is still the mockups'. */
.rd-split {
  min-height: 70vh;
  background-size: cover;
  display: flex;
  align-items: stretch;
}
.rd-split__panel {
  background-color: var(--color-panel-tint);
  padding: var(--space-2xl) var(--space-xl);
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rd-split__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}

/* Copy on the panel. Selectors are scoped to .rd-split__panel because
   `.rd-split__panel p` below is (0,1,1); a bare `.rd-split__statement` would
   lose the cascade and the 46px statement would render as 19px body copy.
   No text-shadow: at --color-panel-tint's 0.6 the tint alone carries white
   type past AA on all three photographs, so the shadow that was propping it
   up is gone. */
.rd-split__panel .rd-split__statement,
.rd-split__panel .rd-h2--onpanel {
  margin: 0;
  font-family: var(--rd-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.28;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rd-panel-ink);
  text-wrap: pretty;
  max-width: 640px;
}
.rd-split__panel p {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--rd-panel-body);
  text-wrap: pretty;
}
.rd-split__panel p strong { color: var(--rd-panel-ink); font-weight: 700; }

/* --- two equal columns divided by a hairline ---------------------------- */
.rd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rd-cols__col { padding-right: 80px; }
.rd-cols__col + .rd-cols__col {
  border-left: 1px solid var(--rd-rule);
  padding-left: 80px;
  padding-right: 0;
}
/* The /o-nas/ closing pair stacks heading, copy and button with even gaps
   and a left-aligned button. */
.rd-cols--stack .rd-cols__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.rd-cols--stack .rd-h3 { margin: 0; }

/* --- coloured bands ------------------------------------------------------ */
.rd-band--blush { background: var(--rd-band-blush); }
.rd-band--warm { background: var(--rd-band-warm); }

/* --- numbered benefits (/pro-partnery/) --------------------------------- */
.rd-benefit {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 48px;
  padding: 56px 0;
}
.rd-benefit:first-of-type { padding-top: 0; }
.rd-benefit__num {
  font-family: var(--rd-serif);
  font-size: 92px;
  line-height: 0.9;
  color: var(--rd-numeral);
}
.rd-hr {
  height: 1px;
  background: var(--rd-rule);
  border: 0;
  margin: 0;
}

/* --- profession cards ---------------------------------------------------- */
.rd-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 40px;
}
.rd-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 24px;
}
.rd-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-card h3 {
  margin: 0 0 14px;
  font-family: var(--rd-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--rd-ink);
}
.rd-card p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--rd-body);
  text-wrap: pretty;
}

/* --- ordered steps ------------------------------------------------------- */
.rd-steps {
  margin: 0 0 56px;
  padding: 0 0 0 26px;
  max-width: 70ch;
  font-size: 19px;
  line-height: 1.7;
  color: var(--rd-body);
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: decimal;
}
.rd-steps a { color: var(--rd-btn); text-decoration: underline; text-underline-offset: 3px; }
.rd-steps a:hover { color: #8C7663; }

/* --- section rhythm ------------------------------------------------------ */
/* VERTICAL ONLY. These are applied alongside .rd-wrap on the same element,
   and .rd-wrap's `padding: 0 64px` is declared earlier at equal specificity,
   so a `padding` SHORTHAND here silently wiped the side padding. Desktop hid
   it because .rd-wrap's max-width:1240px + margin:auto still indented the box
   on a wide viewport; below 1240px there is no centring margin left and the
   text sat flush against the edge of the screen. */
.rd-sec { padding-top: 112px; padding-bottom: 112px; }
.rd-sec--head { padding-top: 88px; padding-bottom: 72px; }
.rd-sec--band { padding-top: 104px; padding-bottom: 104px; }
.rd-sec--tail { padding-top: 112px; padding-bottom: 128px; }
.rd-sec--cards { padding-top: 112px; padding-bottom: 96px; }

/* /pro-partnery/ header puts the login CTA beside the title. */
.rd-phead {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 64px;
  align-items: end;
}
.rd-phead__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 4px;
}
/* "Už jste partnerem?" — 30px to match the heading consolidation. It is a <p>
   here rather than the old page's .partner-intro__cta h3, so it did not pick
   the change up automatically. */
.rd-phead__cta p {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 30px;
  line-height: 1.2;
  color: var(--rd-ink);
}

/* --------------------------------------------------------------------------
   Responsive. The mockups are desktop-only, so these breakpoints are mine:
   collapse every 2-up and 4-up grid, drop the hairline to a top border (a
   vertical rule above a stacked block reads as a stray line), and pull the
   display sizes down so a 76px h1 does not overflow a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rd-wrap { padding: 0 32px; }
  /* The panel goes full width on a phone. Below 50% it gets too narrow to
     hold the statement, and the photo still reads underneath it because the
     tint is only 0.41. */
  .rd-split {
    min-height: 0;
    background-position: center;
  }
  .rd-split__panel { width: 100%; padding: 56px 32px; }
  /* Both scoped to .rd-split__panel. The base rule is (0,2,0), so a bare
     `.rd-split__statement` here is (0,1,0) and loses even inside the media
     query — the statement stayed at its 40px desktop size on phones. */
  .rd-split__panel .rd-split__statement,
  .rd-split__panel .rd-h2--onpanel { font-size: 30px; }
  .rd-cols { grid-template-columns: 1fr; }
  .rd-cols__col { padding-right: 0; }
  .rd-cols__col + .rd-cols__col {
    border-left: 0;
    border-top: 1px solid var(--rd-rule);
    padding-left: 0;
    padding-top: 40px;
    margin-top: 40px;
  }
  .rd-phead { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .rd-benefit { grid-template-columns: 1fr; gap: 12px; }
  .rd-benefit__num { font-size: 64px; }
  /* Vertical only, same reason as the base rules above: a shorthand here
     would re-zero the 32px side padding .rd-wrap sets in this same query. */
  .rd-sec, .rd-sec--band, .rd-sec--cards { padding-top: 64px; padding-bottom: 64px; }
  .rd-sec--head { padding-top: 48px; padding-bottom: 40px; }
  .rd-sec--tail { padding-top: 64px; padding-bottom: 80px; }
}
@media (max-width: 640px) {
  .rd-h1 { font-size: 36px; }   /* article detail's clamp floor is 32-36 too */
  .rd-h2 { font-size: 28px; }
  .rd-h3 { font-size: 24px; }
  .rd-lead { font-size: 19px; }
  .rd-p, .rd-split__panel p { font-size: 17px; }
  .rd-cards { grid-template-columns: 1fr; gap: 40px; }
}