/*
 * Bar-El Adam components stylesheet (redesign, docs/redesign-plan.md 4).
 * Section titles, hero, practice tiles and cards, about (team), articles
 * cards, contact band, values, title band, inner-page grid, contact page,
 * author card, empty state, 404.
 * Mobile first: the unscoped rules are the small-screen layout, and
 * @media (min-width: …) adds the wider layouts on top.
 * Logical properties only. Colours only through theme.json tokens and the
 * section context variables from base.css. Sizes in px follow DESIGN.md.
 * Breakpoints (PROMPT.md, responsiveness): 768, 992, 1200.
 */

/* ==========================================================
   Hero (plan 4.3). Navy night, no image, no gradient. Until
   2026-09-16 the form card followed the banner and rose 40px onto
   it, and the bottom padding carried that overlap. The client moved
   the form to the foot of the page (decision 94), so the banner now
   ends on the steps band and the padding is the ordinary section
   rhythm: the extra 40px came out of all three sizes.
   The heading is not capped in width: from 1200px up it runs the
   whole container at 56px, which is what fills the banner instead
   of leaving a column of empty navy beside it (client note,
   2026-09-10, decision 76).
   ========================================================== */
.ba-hero {
  display: flex;
  min-block-size: 360px;
  padding-block: 32px 40px;
}

/* The same device as the title band in layout.css: the section is the flex
   box and the container is its single stretching child. Until 2026-09-16 the
   form card filled the lower half of the frame; with the card moved to the
   foot of the page the brand row and the h1 are distributed over the frame
   instead, so the heading still lands low, on the brass pans of the
   photograph, which is where the scrim is deepest. Without this the banner
   would keep its height and hold a half-empty field of navy under the
   heading, which is what decision 76 set out to get rid of. */
.ba-hero > .ba-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 100%;
}

/* Under 768px the h1 carries the height on its own: no fixed minimum. */
@media (max-width: 767px) {
  .ba-hero {
    min-block-size: auto;
    padding-block: 24px 24px;
  }
}

.ba-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-block-end: 32px;
}

/* Under 768px the banner has no minimum height, so the photograph's frame
   depends on the content, and decision 90 sized the phone crop to the banner
   as it stood on the morning of 2026-09-16: an amber eyebrow above the h1 and
   the form card over its last 40px. Both went (decisions 93, 94), which took
   the banner from 220px to 180px at 767px and cut off the top of the scales.
   The 40px goes back as space above the h1 rather than under it, so the
   heading stays low on the brass pans where the scrim is deepest. Measured:
   767px is 220px again and 600px is 257px (was 255). From 768px up the
   420px minimum governs and this does not apply. */
@media (max-width: 767px) {
  .ba-hero__top {
    margin-block-end: 72px;
  }

  /* The same problem again with decision 98: the wordmark went from two
     lines (62.4px) to one (31.2px), and the banner lost 31px on every phone.
     The brand keeps its two-line height and centres its one line in it, so
     the banner is exactly as tall as before and the CTA beside it (from
     about 520px) still lines up with the text. At 320px the suffix wraps
     and fills the box on its own. Measured against the old markup: 320,
     375, 600 and 767px all within 1px. The single inner span is the only
     flex item, so the spaces around the pipe survive. */
  .ba-hero__brand {
    display: flex;
    align-items: center;
    min-block-size: 2.4em;
  }
}

/* The client's wordmark on one line, as she sent it on 2026-09-23:
   "בר-אל, אדם | משרד עורכי דין" (decision 98). The name bold and the rest
   regular, the same split as the header. The suffix never breaks inside
   itself, so a narrow screen wraps it whole onto a second line. */
.ba-hero__brand {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 26px;
  line-height: 1.2;
  color: var(--wp--preset--color--white);
}

.ba-hero__name {
  font-weight: 700;
}

.ba-hero__sub {
  font-weight: 400;
  white-space: nowrap;
}

/* Under 360px the suffix wraps to its own line, and a line that opens with
   the pipe reads as a stray mark. There the two lines separate it. */
@media (max-width: 359px) {
  .ba-hero__sep {
    display: none;
  }
}

.ba-hero__cta {
  min-block-size: 52px;
  padding-inline: var(--wp--preset--spacing--56);
}

.ba-hero__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--white);
  text-wrap: balance;
}

/* The banner photograph on a phone. The wide file is composed for a 3.33:1
   frame with the subject in the left fifth, and the phone banner is almost
   square (375x361 measured), so `cover` on that file would show a window of
   the empty middle. The phone gets its own crop instead, built by
   scripts/hero/build-hero-mobile.py and framed on the scales.
   `left bottom` is physical on purpose, the same way the desktop rule is: the
   photograph is composed to the left in both directions, and anchoring the
   bottom keeps the base of the scales and its reflection off the crop line.
   The scrim runs `to bottom`, not `to right` like the desktop one: here the
   copy spans the full width, so the protection has to be vertical, and it is
   deepest over the lower half where the h1 sits on the brass pans.
   The graticule and the two light pools stay desktop only (decision 85): they
   were added to fill the empty right half of the wide frame, and this crop has
   no empty half for them to fill.
   Bounded at 599px, which is where the banner stops being phone shaped. The
   box measures 1.00:1 at 360px and 1.84:1 at 540px, so `cover` still holds
   the subject; at 600px the h1 drops to one line and the box jumps to 2.35:1,
   and cover on a 1.08:1 crop would show nothing but the blurred base. From
   there the wide file is the right one, so it starts at 600 rather than 768.
   ========================================================== */
@media (max-width: 599px) {
  .ba-hero.is-navy {
    background-image:
      linear-gradient(to bottom, rgba(15, 33, 55, .40) 0%, rgba(15, 33, 55, .86) 30%, rgba(15, 33, 55, .88) 90%, rgba(15, 33, 55, .74) 100%),
      url("../img/hero-scales-mobile.webp");
    background-size: cover, cover;
    background-position: center, left bottom;
    background-repeat: no-repeat;
  }
}

/* The banner photograph (scales and globe, left third; the rest of the frame
   is flat navy) with a scrim over it. This wide file is composed 3.33:1, so
   it takes over at 600px, where the banner itself turns wide and flat and the
   phone crop above stops fitting. Everything else about the desktop banner
   still starts at 768 (decision 90, which amends 83).
   `to right` is physical on purpose: the copy sits at the inline start, which
   is the right edge in RTL, and that is the end that has to stay dark enough
   for white text (measured 14.9:1 at the h1). */
@media (min-width: 600px) {
  .ba-hero.is-navy {
    background-image:
      radial-gradient(90% 130% at 84% -30%, rgba(140, 178, 232, .17) 0%, rgba(15, 33, 55, 0) 62%),
      radial-gradient(70% 120% at 72% 118%, rgba(96, 140, 200, .16) 0%, rgba(15, 33, 55, 0) 60%),
      url("../img/hero-graticule.svg"),
      linear-gradient(to right, rgba(15, 33, 55, .10) 0%, rgba(15, 33, 55, .70) 50%, rgba(15, 33, 55, .94) 100%),
      url("../img/hero-scales.webp");
    background-size: cover, cover, cover, cover, cover;
    background-position: center, center, left center, center, center; /* physical: the photograph is composed to the left in both directions */
    background-repeat: no-repeat;
  }
}

@media (min-width: 768px) {
  .ba-hero {
    min-block-size: 420px;
    padding-block: 48px 56px;
  }

  .ba-hero__top {
    margin-block-end: 40px;
  }

  .ba-hero__brand {
    font-size: 34px;
  }

  .ba-hero__title {
    font-size: 46px;
  }

  .ba-hero__cta {
    min-block-size: 56px;
    padding-inline: var(--wp--preset--spacing--56);
    font-size: var(--wp--preset--font-size--sub);
  }
}

@media (min-width: 1200px) {
  .ba-hero__title {
    font-size: 56px;
  }
}

/* ==========================================================
   Three steps (plan 4.13). The band the client's old site had
   between the banner and the tiles, rebuilt on white: a real <ol>
   so the sequence is in the markup, a numbered badge per step and
   one hairline that runs from badge to badge behind them. Sits
   between the banner and the tiles, and it is what brings the
   navy share of the home page down to about 31%.
   ========================================================== */
.ba-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ba-step {
  position: relative;
  text-align: center;
}

.ba-step__num {
  position: relative;
  z-index: 1; /* over the connecting hairline */
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  margin-inline: auto;
  margin-block-end: 16px;
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--amber);
  border-radius: var(--wp--custom--radius);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-3);
  font-weight: 700;
  line-height: 1;
}

.ba-step__title {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--text-heading);
}

.ba-step__text {
  margin: 0 auto;
  max-inline-size: 34ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-body);
  text-wrap: balance;
}



@media (min-width: 768px) {
  .ba-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  /* From the centre of this badge to the centre of the next one: half
     this step, the 24px gap, half the next step. The last step has no
     next one, so it draws nothing. */
  .ba-step::before {
    content: "";
    position: absolute;
    inset-block-start: 27px;
    inset-inline-start: 50%;
    inline-size: calc(100% + 24px);
    block-size: 2px;
    background: var(--wp--preset--color--border);
  }

  .ba-step:last-child::before {
    content: none;
  }
}

/* ==========================================================
   Practice areas: five tiles since 2026-09-25 (plan 4.5 had six;
   decision 109). Grid 5 / 5 / 2 / 1, the odd last tile centred at 2. Each tile 220px on 768+, navy night and
   navy deep alternating, centred, hover lifts 8px and reveals
   the body. Under 768 the tiles stack, the body is always
   visible and the head runs horizontally.
   ========================================================== */
.ba-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .ba-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ba-band > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc(50% - 6px);
  }
}

/* One row of five from 992: at 992 each tile is about 180px, the width
   six tiles had at 1200. */
@media (min-width: 992px) {
  .ba-band {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* The tile carries its own navy context whatever section it sits in. */
.ba-tile {
  --ground: var(--wp--preset--color--navy-night);
  --fg: var(--wp--preset--color--white);
  --fg-strong: var(--wp--preset--color--white);
  --fg-muted: var(--wp--preset--color--text-muted-navy);
  --accent: var(--wp--preset--color--amber);
  --focus-ring: var(--wp--preset--color--amber);
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 24px 12px;
  background: var(--ground);
  color: var(--fg);
  text-align: center;
  border-radius: var(--wp--custom--radius);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.ba-tile--alt {
  --ground: var(--wp--preset--color--navy-deep);
}

.ba-tile:hover,
.ba-tile:focus-within {
  background: var(--wp--preset--color--navy-hover);
  transform: translateY(-8px);
  box-shadow: var(--wp--custom--shadow-md);
}

.ba-tile__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-decoration: none;
}

.ba-tile__head:hover {
  text-decoration: none;
}

.ba-tile__icon {
  display: inline-flex;
  color: var(--fg);
}

.ba-tile__icon .ba-icon {
  inline-size: 40px;
  block-size: 40px;
}

.ba-tile__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-strong);
}

.ba-tile__rule {
  display: block;
  inline-size: 32px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--wp--preset--color--amber);
}

.ba-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-block-start: 10px;
}

.ba-tile__subs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
}

.ba-tile__subs li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* The amber square bullet (SITEMAP 2.3). */
.ba-tile__subs li::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  background: var(--wp--preset--color--amber);
}

.ba-tile__more {
  min-block-size: 40px;
  padding-inline: 20px;
}

/* 768 and up: the body is hidden at rest and revealed on hover
   or keyboard focus. It stays in the flow at zero height so the
   tile keeps its 220px box, and the head sits centred until then. */
@media (min-width: 768px) {
  .ba-tile {
    block-size: 220px;
    overflow: hidden;
  }

  .ba-tile__body {
    max-block-size: 0;
    padding-block-start: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 200ms ease, max-block-size 200ms ease, visibility 0s linear 200ms;
  }

  .ba-tile:hover .ba-tile__body,
  .ba-tile:focus-within .ba-tile__body {
    max-block-size: 120px;
    padding-block-start: 8px;
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, max-block-size 200ms ease, visibility 0s;
  }

  /* Revealed budget inside the 220px box: 16 + 40 icon + 6 + 24 title
     + 6 + 2 rule + 8 + 38 subs + 6 + 40 button + 16 = 202. */
  .ba-tile:hover,
  .ba-tile:focus-within {
    padding-block: 16px;
  }

  .ba-tile:hover .ba-tile__head,
  .ba-tile:focus-within .ba-tile__head {
    gap: 6px;
  }

  .ba-tile:hover .ba-tile__subs,
  .ba-tile:focus-within .ba-tile__subs {
    line-height: 1.35;
  }

  .ba-tile:hover .ba-tile__body,
  .ba-tile:focus-within .ba-tile__body {
    gap: 6px;
  }
}

/* Under 768: auto height, horizontal head, body always visible. */
@media (max-width: 767.98px) {
  .ba-tile {
    text-align: start;
    padding: 20px 16px;
  }

  /* Title at the inline start (right), the 40px icon at the inline end
     (left, PROMPT: the icon sits to the left of its text), the 32x2 rule
     on its own row under the title. */
  .ba-tile__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }

  .ba-tile__title {
    grid-column: 1;
    grid-row: 1;
  }

  .ba-tile__icon {
    grid-column: 2;
    grid-row: 1;
  }

  .ba-tile__rule {
    grid-column: 1;
    grid-row: 2;
    inline-size: 32px;
    justify-self: start;
  }

  .ba-tile__body {
    align-items: flex-start;
  }

  .ba-tile__subs li {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba-tile:hover,
  .ba-tile:focus-within {
    transform: none;
  }
}

/* ==========================================================
   Cards (plan 4.7, 4.12, DESIGN.md 5): articles, archive of
   practice areas, values, author card.
   ========================================================== */
.ba-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .ba-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .ba-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ba-cards > li {
  display: flex;
}

.ba-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 24px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text-body);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
  box-shadow: var(--wp--custom--shadow-sm);
}

.ba-card__media {
  display: block;
  margin: -24px -24px 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wp--preset--color--tint);
  border-start-start-radius: var(--wp--custom--radius);
  border-start-end-radius: var(--wp--custom--radius);
}

.ba-card__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The core featured-image block wraps its own figure. */
.ba-card .wp-block-post-featured-image {
  margin: -24px -24px 8px;
  overflow: hidden;
  border-start-start-radius: var(--wp--custom--radius);
  border-start-end-radius: var(--wp--custom--radius);
}

.ba-card .wp-block-post-featured-image img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ba-card__date,
.ba-card .wp-block-post-date {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-muted);
}

.ba-card__title,
.ba-card .wp-block-post-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--text-heading);
}

.ba-card__title a,
.ba-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.ba-card__title a:hover,
.ba-card .wp-block-post-title a:hover {
  text-decoration: underline;
}

.ba-card__excerpt,
.ba-card .wp-block-post-excerpt__excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ba-card__more,
.ba-card .wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px; /* touch target */
  margin-block-start: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--amber-text);
  text-decoration: none;
}

.ba-card__more:hover,
.ba-card .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

.ba-card .wp-block-post-excerpt__more-text,
.ba-card .wp-block-post-excerpt {
  margin: 0;
}

/* The tint placeholder when a post has no featured image. */
.ba-card__placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--wp--preset--color--tint);
}

/* Query pagination under the article grids: 44px targets, centred. */
.ba-pagination {
  margin-block-start: 40px;
  font-size: 15px;
  font-weight: 600;
}

.ba-pagination a,
.ba-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 12px;
  color: var(--wp--preset--color--navy-night);
  text-decoration: none;
  border-radius: var(--wp--custom--radius);
}

.ba-pagination a:hover {
  background: var(--wp--preset--color--tint);
}

.ba-pagination .page-numbers.current {
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--white);
}

/* Practice-area cards on the archive (practice-grid variant cards). */
.ba-card__icon {
  display: inline-flex;
  color: var(--wp--preset--color--text-heading); /* PROMPT icons: navy night on white */
}

.ba-card__icon .ba-icon {
  inline-size: 32px;
  block-size: 32px;
}

.ba-card--area .ba-card__title {
  font-size: 22px;
}

/* The archive shows the same six areas as the home page, so it carries the
   same signature: the 40px icon of a tile and the amber rule under the title
   (DESIGN.md 3, "הוא חוזר תחת כל כותרת ובכל אריח"). Client note 2026-09-10,
   decision 87. */
.ba-card--area .ba-card__icon .ba-icon {
  inline-size: 40px;
  block-size: 40px;
}

.ba-card--area .ba-card__title::after {
  content: "";
  display: block;
  inline-size: 32px;
  block-size: 2px;
  margin-block-start: 10px;
  border-radius: 2px;
  background: var(--wp--preset--color--amber);
}

/* Values cards on the about page: h2 in amber with a 32x2 rule. */
.ba-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .ba-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ba-card .ba-card__heading {
  margin: 0 0 4px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--amber-text);
}

.ba-card__heading::after {
  content: "";
  display: block;
  inline-size: 32px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--wp--preset--color--amber);
  margin-block-start: 10px;
}

.ba-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--wp--preset--color--text-body);
}

/* ==========================================================
   About on the home page and the team on the about page
   (plan 4.6 and 4.12). Two columns, gap 60px; each person is a
   grid of text and a 200x260 portrait: the client's cut-out
   photograph laid on the tint, both people cropped to the same
   head size (scripts/portraits/build-portraits.py). Eldad:
   portrait at the inline end (left in RTL). Elza (--rev):
   portrait at the inline start. Under 992 both stack with the
   portrait above the text.
   ========================================================== */
.ba-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .ba-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
  }
}

.ba-person {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.ba-person__media {
  position: relative;
  display: block;
  inline-size: 260px;
  block-size: 340px;
  flex: none;
  margin-inline: auto;
}

/* The plate the figure stands in front of. It starts 76px below the top of
   the box, so the head and the shoulders rise above its edge, and the bottom
   of the cut-out dissolves into it. `inset` is physical, but 0 on both sides
   is symmetric, so RTL is unaffected. */
.ba-person__media::before {
  content: "";
  position: absolute;
  inset: 76px 0 0;
  border-radius: var(--wp--custom--radius);
  background: var(--wp--preset--color--tint);
}

.ba-person__portrait {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
  /* the shadow follows the alpha of the cut-out, not a rectangle */
  filter: drop-shadow(0 14px 22px rgba(15, 33, 55, 0.18));
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 100%);
}

.ba-person__text {
  min-inline-size: 0;
}

.ba-person__name {
  display: inline-block;
  margin: 0 0 12px;
  padding-block-end: 6px;
  border-block-end: 2px solid var(--wp--preset--color--amber);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--text-heading);
}

.ba-person__bio {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--wp--preset--color--text-body);
  max-inline-size: 70ch;
}

.ba-person__bio:last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .ba-person__name {
    font-size: 26px;
  }
}

@media (min-width: 992px) {
  .ba-person {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
  }

  .ba-person__media {
    grid-column: 2;
    grid-row: 1;
  }

  .ba-person__text {
    grid-column: 1;
    grid-row: 1;
  }

  .ba-person--rev,
  .ba-person--full {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .ba-person--rev .ba-person__media,
  .ba-person--full .ba-person__media {
    grid-column: 1;
  }

  .ba-person--rev .ba-person__text,
  .ba-person--full .ba-person__text {
    grid-column: 2;
  }
}

/* The about page: two full profiles stacked, portrait beside the text. */
.ba-team__stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.ba-person--full .ba-person__bio {
  max-inline-size: 70ch;
}

/* ==========================================================
   Articles on the home page (plan 4.7).
   ========================================================== */
.ba-articles__foot {
  margin: 40px 0 0;
  text-align: center;
}

/* ==========================================================
   Contact band (plan 4.8, SITEMAP 2.6). Navy deep, 120px, three
   equal columns, amber icon to the LEFT of the white text. The
   icon comes after the text in the DOM, so in RTL it lands at
   the inline end, which is the left.
   ========================================================== */
.ba-band-contact {
  min-block-size: 120px;
  padding-block: 32px;
}

.ba-band-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .ba-band-contact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

.ba-band-contact__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 44px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--wp--preset--color--white);
}

.ba-band-contact__item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px; /* touch target */
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.ba-band-contact__item a:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--amber);
}

.ba-band-contact__icon {
  display: inline-flex;
  flex: none;
  color: var(--wp--preset--color--amber);
}

.ba-band-contact__icon .ba-icon {
  inline-size: 20px;
  block-size: 20px;
}

/* ==========================================================
   Title band of every inner page (plan 4.10). Tint, 120px,
   breadcrumbs then the h1 with a right-aligned 56x3 amber rule.
   ========================================================== */
.ba-band-title {
  min-block-size: 120px;
  padding-block: 24px;
  background: var(--ground);
  color: var(--fg);
}

.ba-band-title .ba-crumbs {
  font-size: 13px;
  margin-block-end: 8px;
}

.ba-band-title__date {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--wp--preset--color--text-muted);
}

/* ==========================================================
   Inner page body (plan 4.11): content 7fr, side nav 3fr, gap
   40px, stacked under 992. The generic .ba-inner grid belongs to
   layout.css; this scoped rule guarantees the plan's columns for
   the section this file's templates emit.
   ========================================================== */
.ba-inner-sec .ba-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 992px) {
  .ba-inner-sec .ba-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }
}

/* A page with content only (about, legal, 404, search): 720px centred. */
.ba-inner__content--solo {
  max-inline-size: 720px;
  margin-inline: auto;
}

/* The about intro is followed by the team section, which brings its own
   top padding: no bottom padding here, so the two do not stack to 160px. */
.ba-about-sec {
  padding-block-end: 0;
}

/* The intro sits on the container edge like every other about section; the measure is capped per paragraph. */
.ba-about-sec .ba-inner__content--solo {
  max-inline-size: none;
  margin-inline: 0;
}

.ba-about-sec .ba-inner__content--solo p {
  max-inline-size: 70ch;
}

/* ==========================================================
   Contact page (plan 4.12): the full form beside the office
   details and the map, 7fr / 5fr, stacked under 992.
   ========================================================== */
.ba-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 992px) {
  .ba-contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.ba-contact__info {
  min-inline-size: 0;
}

.ba-contact__info ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.ba-contact__info li {
  padding-block: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-body);
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--border);
}

.ba-contact__info li:last-child {
  border-block-end: 0;
}

.ba-contact__info strong {
  font-weight: 600;
  color: var(--wp--preset--color--text-heading);
}

.ba-contact__info a {
  color: var(--wp--preset--color--amber-text);
}

.ba-contact__map {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--wp--custom--radius);
  background: var(--wp--preset--color--tint);
}

/* ==========================================================
   Author card under a single article (plan 4.12).
   ========================================================== */
.ba-author-card {
  max-inline-size: 720px;
  margin-inline: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.ba-author-card__logo {
  display: inline-flex;
  flex: none;
  color: var(--wp--preset--color--amber-text);
}

.ba-author-card__logo .ba-icon {
  inline-size: 40px;
  block-size: 40px;
}

.ba-author-card__body {
  flex: 1 1 320px;
  min-inline-size: 0;
}

.ba-author-card__name {
  margin: 0 0 4px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--text-heading);
}

.ba-author-card__text {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-body);
}

.ba-author-card__tel {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px; /* touch target */
  font-weight: 600;
  color: var(--wp--preset--color--amber-text);
  text-decoration: none;
}

.ba-author-card__tel:hover {
  text-decoration: underline;
}

.ba-related {
  padding-block-start: 0;
}

/* ==========================================================
   Empty state, 404, search results list.
   ========================================================== */
.ba-empty {
  background: var(--wp--preset--color--tint);
  border-radius: var(--wp--custom--radius);
  max-inline-size: 720px;
  padding: 32px;
}

.ba-empty > :first-child {
  font-size: 18px;
  font-weight: 600;
  color: var(--wp--preset--color--text-heading);
}

.ba-404__links {
  margin-block-start: 24px;
}

.ba-404__links a,
.ba-empty a {
  color: var(--wp--preset--color--amber-text);
}

.ba-results {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A link, not quotes: the reviews on din.co.il belong to their writers
   (its terms, clauses 12 and 14), so the site points to them (decision 111). */
.ba-team__reviews {
  margin: 32px 0 0;
  text-align: center;
}

.ba-team__reviews a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  color: var(--wp--preset--color--amber-text);
  text-underline-offset: 3px;
}