/* ==========================================================================
   KF Elements — Page Header
   --------------------------------------------------------------------------
   Three layouts (the third, `photo`, at the foot of this sheet). `text` is the compact text header this widget has always been:
   type, rhythm and one button row. `split` puts a photograph in the other half
   of the window, on base.css's .kfe-split-bleed primitive — the text stays on
   the site's own container while the picture runs to the viewport's edge.

   The heading is styled through .kfe-page-header-title and NOT through a bare
   h1/h2, because the level is a control (header_size) and the same rules must
   hold at every level the editor can choose.

   Every value the site can own is a --kfe-* token read with TODAY'S value as
   its fallback (ADR-0004 decision 2), so nothing moves on a site that sets
   none of them. The split's own geometry — the fold, the fade's stops, the
   stacked image's height — is written as the reference draws it: no other site
   renders this layout.
   ========================================================================== */

.kfe .kfe-page-header .kfe-page-header-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  /* NOT --kfe-h2-size: this is the page's H1, and a site map that sizes its
     section titles at 30px would shrink every page header with it. */
  font-size: var(--kfe-title-size, clamp(2rem, 4.4vw, 3.4rem));
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: var(--kfe-title-measure, 24ch);
  margin: 0;
}

.kfe .kfe-page-header .lede {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 18px);
  margin-top: 22px;
  max-width: 62ch;
}
.kfe .kfe-page-header .lede p + p { margin-top: 1em; }

.kfe .kfe-page-header .actions { margin-top: 32px; }

/* The frame's head alignment, with `inherit` as the fallback: unset, the head
   keeps inheriting whatever centres (or does not centre) the container it sits
   in, exactly as it does today.

   BOTH LAYOUTS ARE ON THIS ONE DECLARATION, and the ≤767 block below repeats
   this exact selector pair with `center` in place of `inherit` — the widget's
   only other answer to the same question. `text` carries no layout class at
   all (class-page-header.php:427), so `.kfe-wrap` is the whole of its head
   container and the split's is `.txt` inside the bleed; keep the two selectors
   together and in step wherever the alignment is decided. */
.kfe .kfe-page-header .kfe-wrap,
.kfe .kfe-page-header.layout-split > .kfe-split-bleed > .txt { text-align: var(--kfe-head-align, inherit); }

/* dark-ground flips */
.kfe .kfe-page-header.kfe-dark .kfe-page-header-title { color: #fff; }
.kfe .kfe-page-header.kfe-dark .lede { color: var(--kfe-on-dark); }

@media (max-width: 560px) {
  .kfe .kfe-page-header .actions .kfe-btn { display: block; width: 100%; }
}

/* ==========================================================================
   layout=split (spec §3.1)
   ========================================================================== */

/* The section pads nothing: .txt carries the frame's padding tokens through
   base.css's .kfe-split-bleed, so the picture reaches the top and the bottom
   of the header. */
.kfe .kfe-page-header.layout-split { padding: 0; }

/* The fade is drawn in the section's OWN ground, so a header on mist fades to
   mist. One widget-local property per preset; the default is white, this
   widget's own background default. */
.kfe .kfe-page-header.layout-split { --kfe-phd-ground: var(--kfe-white); }
.kfe .kfe-page-header.layout-split.kfe-bg-surface { --kfe-phd-ground: var(--kfe-surface); }
.kfe .kfe-page-header.layout-split.kfe-bg-tint { --kfe-phd-ground: var(--kfe-surface-deep); }
.kfe .kfe-page-header.layout-split.kfe-bg-dark { --kfe-phd-ground: var(--kfe-primary); }
.kfe .kfe-page-header.layout-split.kfe-bg-deep { --kfe-phd-ground: var(--kfe-primary-deep); }
.kfe .kfe-page-header.layout-split.kfe-bg-accent { --kfe-phd-ground: var(--kfe-accent); }

.kfe .kfe-page-header.layout-split.fold > .kfe-split-bleed > .txt {
  min-height: calc(100svh - var(--kfe-header-h, 0px));
}

/* An empty photograph keeps the half and paints the deeper surface: the
   geometry holds on a page whose banner is still pending. */
.kfe .kfe-page-header.layout-split > .kfe-split-bleed > .media {
  background: var(--kfe-surface-deep);
}
.kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--kfe-phd-ground) 0, transparent 15%);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
    background: linear-gradient(
      90deg,
      var(--kfe-phd-ground) 0,
      color-mix(in srgb, var(--kfe-phd-ground) 85%, transparent) 4%,
      transparent 15%
    );
  }
}

.kfe .kfe-page-header.layout-split .kfe-label { margin-bottom: 18px; }
.kfe .kfe-page-header.layout-split .lede { max-width: 33em; }
.kfe .kfe-page-header.layout-split .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.kfe .kfe-page-header-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--kfe-body, var(--kfe-muted));
}
.kfe .kfe-page-header-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kfe .kfe-page-header-trust svg {
  flex: none;
  color: var(--kfe-accent);
}
.kfe .kfe-page-header-trust a { color: var(--kfe-link, var(--kfe-accent)); }
.kfe .kfe-page-header.kfe-dark .kfe-page-header-trust { color: var(--kfe-on-dark); }
.kfe .kfe-page-header.kfe-dark .kfe-page-header-trust svg { color: var(--kfe-on-dark-soft); }

/* RTL: the fade comes from the side the text is on. A gradient angle has no
   logical form, so this is the pack's html[dir="rtl"] idiom (hero.css). */
html[dir="rtl"] body .kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
  background: linear-gradient(270deg, var(--kfe-phd-ground) 0, transparent 15%);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html[dir="rtl"] body .kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
    background: linear-gradient(
      270deg,
      var(--kfe-phd-ground) 0,
      color-mix(in srgb, var(--kfe-phd-ground) 85%, transparent) 4%,
      transparent 15%
    );
  }
}

/* The reference's three breakpoints, which are rules of this widget rather
   than of the site (spec :272-274). */
@media (max-width: 1200px) {
  .kfe .kfe-page-header.layout-split .kfe-page-header-title { font-size: var(--kfe-title-size, clamp(1.9rem, 4.2vw, 2.4rem)); }
  .kfe .kfe-page-header.layout-split .lede { font-size: var(--kfe-body-size, 17.5px); }
}

@media (max-width: 900px) {
  /* The picture stacks first, at a band's height rather than half a screen,
     and the fade turns vertical. */
  .kfe .kfe-page-header.layout-split > .kfe-split-bleed { grid-template-columns: 1fr; }
  .kfe .kfe-page-header.layout-split > .kfe-split-bleed > .media {
    order: -1;
    height: clamp(190px, 36svh, 300px);
    min-height: 0;
  }
  .kfe .kfe-page-header.layout-split.fold > .kfe-split-bleed > .txt { min-height: 0; }
  .kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
    background: linear-gradient(0deg, var(--kfe-phd-ground) 0, transparent 22%);
  }
  .kfe .kfe-page-header.layout-split .kfe-page-header-title { font-size: var(--kfe-title-size, 2rem); }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  @media (max-width: 900px) {
    .kfe .kfe-page-header.layout-split.has-fade > .kfe-split-bleed > .media::after {
      background: linear-gradient(
        0deg,
        var(--kfe-phd-ground) 0,
        color-mix(in srgb, var(--kfe-phd-ground) 85%, transparent) 6%,
        transparent 22%
      );
    }
  }
}

@media (max-width: 767px) {
  /* The phone header is a centred card on the softer of the two surfaces.

     THE ALIGNMENT IS ONE DECLARATION FOR BOTH LAYOUTS, and it is the selector
     pair at :53-54 with the phone fallback in place of the base one — the same
     two selectors in the same order, so the widget answers "how is my head
     aligned" in exactly one place per width and there is no `.layout-text`
     twin to drift out of step (kf-elements #140).

     EVERYTHING ELSE IN THIS BLOCK STAYS SCOPED, and each one is the split's
     own phone card rather than a rule of the widget: the softer ground under a
     stacked photograph, the type the reference draws at that width, the auto
     margins and `justify-content` that `text-align` cannot give a flex row,
     the full-width buttons and the bordered second link. A `layout=text`
     header has no photograph, no flex actions row, no trust line and no second
     link, so unscoping those would move pixels this issue never asked about on
     every consumer of the pack.

     THE HEADLINE KEEPS THE HEADING FACE AT EVERY WIDTH. It used to switch to
     `--kfe-display-font` at 600 here, which reproduced the reference and was
     recorded as intended in ADR-0004 :167; the operator overruled that on
     2026-09-20 ("it should be the same fonts across the board no matter the
     screen size") and the token has no consumer in this pack any more
     (kf-elements #119, and the ADR's dated amendment of that date).
     `font-size` and `line-height` are NOT part of that ruling and stay: he was
     asked about the size step directly and kept it. */
  .kfe .kfe-page-header.layout-split:not(.kfe-dark) { background: var(--kfe-surface); }
  .kfe .kfe-page-header .kfe-wrap,
  .kfe .kfe-page-header.layout-split > .kfe-split-bleed > .txt { text-align: var(--kfe-head-align, center); }
  /* AND THE CONTAINER IS THE MEASURE AT THIS WIDTH, for both layouts, because
     `text-align` centres ink inside a BOX and the headline's box is 24ch wide
     wherever that is narrower than the column. Measured on this branch's own
     `pageheader.text-head` fixture with the rule above in place and this one
     out: a centred headline sits 50px left of the column's centre at 600 and
     112px left of it at 767 — centred type that does not look centred, which
     is a worse answer than the left one it replaced. The split has carried
     `max-width: none` here since the layout landed; it is lifted out of that
     rule rather than copied, so the measure is released in ONE place like the
     alignment above it. Releasing it moves nothing when the column is already
     narrower than 24ch (every real phone: the box is 427px and the column is
     343px at 390), and a start-aligned headline keeps its left edge either
     way — the box grows to the right.

     AND IT IS WRITTEN BARE rather than as `var(--kfe-title-measure, none)`,
     which makes it the pack's only title `max-width` that does not read that
     token — ADR-0004 decision 2's form, which ten sheets follow, `:29` of this
     one included. It is deliberate. Read as `var(--kfe-title-measure, none)`,
     a consumer who set the token to a `ch` value (which several of those
     sheets' own fallbacks invite) would re-bind the measure at ≤767 and
     un-centre the head the rule above exists to centre. The cost is stated
     rather than hidden: after this, `--kfe-title-measure` has NO reader on a
     page header below 767px, on EITHER layout, on every consumer; it keeps its
     reader at every width above the breakpoint. And wp-eedk — the consumer
     that filed #140 — already sets the token to `none`
     (`themes/euroeyes-dk/style.css:706`), so the 50px and 112px above are not
     reachable there: on that site declaration 1 alone was already the whole
     answer, and the whole cost of this one lands on other consumers of a
     shared pack. */
  .kfe .kfe-page-header .kfe-page-header-title { max-width: none; }
  .kfe .kfe-page-header.layout-split .kfe-page-header-title {
    font-size: var(--kfe-title-size, 2rem);
    line-height: 1.06;
    color: var(--kfe-heading, var(--kfe-primary-deep));
  }
  .kfe .kfe-page-header.layout-split .lede,
  .kfe .kfe-page-header.layout-split .kfe-page-header-trust { margin-inline: auto; }
  .kfe .kfe-page-header.layout-split .kfe-page-header-trust { justify-content: center; }
  .kfe .kfe-page-header.layout-split .actions { justify-content: center; }
  .kfe .kfe-page-header.layout-split .actions .kfe-btn,
  .kfe .kfe-page-header.layout-split .actions .kfe-more { display: block; width: 100%; text-align: center; }
  /* The second link becomes a bordered button, as the reference draws it, so
     it takes the pack's button radius — `--kfe-btn-radius`, which base.css:43
     declares as 50px, so it is read bare (ADR-0004 decision 2's form for a
     declared token; a `, 8px` fallback here could never apply). The spec's
     "radius 8" (§3.1) is what the site map sets that token to, measured on
     P1 @390 in run V. */
  .kfe .kfe-page-header.layout-split .actions .kfe-more {
    background-color: var(--kfe-white);
    border: 1px solid var(--kfe-line);
    border-radius: var(--kfe-btn-radius);
    padding: 15px 20px;
  }
  .kfe .kfe-page-header.layout-split.kfe-dark .actions .kfe-more {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.35);
  }
}

/* ==========================================================================
   layout=photo (w2.homepack.1)
   --------------------------------------------------------------------------
   The photograph runs the full width of the widget ABOVE the text — never
   behind it — with a small label and a list of places over its lower start
   corner, and the eyebrow, the heading, the lede and the two actions centred
   in a band under it. Every rule leads with `.layout-photo` or a class only
   this layout prints, so neither released layout can match one.

   Below 900px the picture keeps its own proportions; from 900px it is cropped
   to `--kfe-photo-height` (the reference's min(82vh, 840px)) around the
   focal point, which falls back to 50% 36% here where the other layouts
   centre it. No overlay: the byline sits on the picture as it is.
   ========================================================================== */
.kfe .kfe-page-header.layout-photo { padding: 0; }
.kfe .kfe-page-header.layout-photo > .kfe-page-header-photo {
  position: relative;
  overflow: hidden;
  background: var(--kfe-surface-deep);
}
.kfe .kfe-page-header.layout-photo .kfe-page-header-photo-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
@media (min-width: 900px) {
  .kfe .kfe-page-header.layout-photo .kfe-page-header-photo-img {
    height: var(--kfe-photo-height, min(82vh, 840px));
    object-fit: cover;
    object-position: var(--kfe-focus-x, 50%) var(--kfe-focus-y, 36%);
  }
}
.kfe .kfe-page-header-places {
  position: absolute;
  inset-inline-start: clamp(24px, 4vw, 60px);
  bottom: clamp(18px, 3vw, 40px);
  z-index: 1;
  text-align: start;
}
.kfe .kfe-page-header-places-label {
  margin: 0 0 6px;
  font-size: var(--kfe-places-label-size, 10px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kfe-places-label-color, var(--kfe-label-color, var(--kfe-accent)));
}
.kfe .kfe-page-header-places ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.kfe .kfe-page-header-places li {
  font-size: var(--kfe-places-size, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--kfe-places-color, var(--kfe-ink));
}
.kfe .kfe-page-header-places li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 0.55em;
  font-weight: 700;
  color: var(--kfe-places-dot, var(--kfe-accent));
}
@media (max-width: 760px) {
  .kfe .kfe-page-header-places { inset-inline-start: 20px; bottom: 18px; }
}

/* The centred band under the picture carries the frame's padding tokens,
   which the section itself no longer does. */
.kfe .kfe-page-header.layout-photo > .kfe-wrap {
  padding-block: var(--kfe-section-pad-start, var(--kfe-section-pad)) var(--kfe-section-pad-end, var(--kfe-section-pad));
  text-align: var(--kfe-head-align, center);
}
.kfe .kfe-page-header.layout-photo .kfe-page-header-title { margin-inline: auto; }
.kfe .kfe-page-header.layout-photo .lede { margin: 18px auto 0; max-width: var(--kfe-body-measure, 60ch); }
.kfe .kfe-page-header.layout-photo .lede strong { color: var(--kfe-heading, var(--kfe-primary)); }
.kfe .kfe-page-header.layout-photo .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.kfe .kfe-page-header.layout-photo.kfe-dark .lede strong { color: var(--kfe-white); }

/* RTL — connected scripts need room, not tracking (see base.css). */
html[dir="rtl"] body .kfe .kfe-page-header .kfe-page-header-title { letter-spacing: 0; line-height: 1.45; }