/* =========================================================
   סהר בירי – משרד עורכי דין · Home page refresh · v2
   Concept: "Modern Editorial" — flat surfaces, generous
   whitespace, big tight headlines, pill chips, inset rounded
   photos, bento practice grid, floating dark CTA island.
   Bright paper palette preserved. Loaded ONLY by index.html,
   after style.css, so inner pages are untouched. Header,
   hero (incl. trust bar) and footer keep their existing styles.
   ========================================================= */

:root {
  --hx-r-xl: 28px;
  --hx-r-lg: 22px;
  --hx-r-md: 18px;
  --hx-r-sm: 14px;
  --hx-border: 1px solid var(--line-soft);
  --hx-shadow: 0 16px 40px -30px rgba(26, 39, 64, .3);
  --hx-shadow-hover: 0 30px 60px -34px rgba(26, 39, 64, .38);
}

/* ---------- Rhythm: more air, softer alt bands ---------- */
.section { padding-block: clamp(92px, 11vw, 148px); }
.section.alt {
  background: linear-gradient(180deg, rgba(201, 160, 99, .055), rgba(201, 160, 99, .015) 72%), var(--paper);
  border-block: 0;
}
#practice {
  background: radial-gradient(46% 38% at 12% 0%, rgba(201, 160, 99, .05), transparent 60%);
}

/* ---------- Eyebrows become pill chips ---------- */
.eyebrow {
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(125, 92, 46, .28);
  border-radius: 999px;
  background: rgba(201, 160, 99, .1);
  font-size: .74rem;
  letter-spacing: .16em;
  margin-bottom: 20px;
}
.eyebrow::before, .eyebrow.center::after { display: none; }
.cta-band .eyebrow {
  border-color: rgba(201, 160, 99, .4);
  background: rgba(201, 160, 99, .14);
}

/* ---------- Headline scale — bigger, tighter ---------- */
.section-head h2 {
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1.14;
}
.section-head p { font-size: 1.1rem; }

/* ---------- Buttons — pill, flatter (hero & header untouched) ---------- */
.section .btn, .cta-band .btn {
  border-radius: 999px;
  padding: 15px 32px;
}
.section .btn-gold, .cta-band .btn-gold {
  box-shadow: 0 14px 30px -14px rgba(125, 92, 46, .5);
}
.section .btn-outline { border-color: rgba(26, 39, 64, .25); }

/* ---------- Icon chips — flat navy squircles, no bevels ---------- */
.p-icon, .v-icon, .st-ico, .i-icon {
  border-radius: var(--hx-r-sm);
  background: linear-gradient(160deg, #1d3255, #12203a);
  border: 1px solid rgba(201, 160, 99, .3);
  box-shadow: none;
}
.p-icon { width: 52px; height: 52px; }
.v-icon { width: 48px; height: 48px; margin-bottom: 16px; }
.st-ico { width: 44px; height: 44px; margin-bottom: 16px; }
.i-icon { width: 44px; height: 44px; }
.st-ico .ico { width: 22px; height: 22px; }
.i-icon .ico { width: 21px; height: 21px; }
.p-icon .ico, .v-icon .ico, .st-ico .ico, .i-icon .ico { filter: none; }

/* ---------- Practice — bento: featured banner + two cards ---------- */
.practice-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  border-bottom: 0;
  align-items: stretch;
}

.practice-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 30px;
  background: var(--card);
  border: var(--hx-border);
  border-radius: var(--hx-r-lg);
  box-shadow: var(--hx-shadow);
  transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s var(--ease);
}
.practice-card:hover {
  background: var(--card);
  transform: translateY(-5px);
  border-color: var(--line);
  box-shadow: var(--hx-shadow-hover);
}

/* Inset rounded photo */
.p-media {
  height: 210px;
  min-height: 0;
  margin: 0 0 20px;
  border: 0;
  border-radius: var(--hx-r-md);
  box-shadow: none;
}
.p-media::after {
  background: linear-gradient(to bottom, rgba(13, 23, 40, .22), transparent 42%);
}

.practice-card > .p-icon { margin-bottom: 16px; }
.practice-card > h3 { font-size: 1.4rem; letter-spacing: -.01em; }
.practice-card > p { flex-grow: 1; font-size: .99rem; }
.p-points { margin: 16px 0 18px; }
.card-link { margin-top: auto; }

/* Featured card spans the full row — banner with side photo */
.practice-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas:
    "media icon"
    "media title"
    "media desc"
    "media points"
    "media link";
  column-gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px);
  border-color: rgba(201, 160, 99, .38);
}
.practice-card.featured .p-media {
  height: 100%;
  min-height: 320px;
  margin: 0;
}
.practice-card.featured > h3 { font-size: clamp(1.5rem, 2.3vw, 1.8rem); }

/* Featured flag — glass pill over the inset photo */
.p-flag {
  top: calc(clamp(24px, 3vw, 36px) + 12px);
  inset-inline-start: calc(clamp(24px, 3vw, 36px) + 12px);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .65);
  color: #1a2740;
  font-weight: 600;
  letter-spacing: .1em;
}

/* ---------- Values — clean flat cards ---------- */
.values-grid { gap: 18px; }
.value-item {
  background: var(--card);
  border: var(--hx-border);
  border-radius: var(--hx-r-md);
  padding: 28px 24px 24px;
  box-shadow: var(--hx-shadow);
  transition: transform .35s var(--ease), border-color .3s ease, box-shadow .35s var(--ease);
}
.value-item + .value-item { border-inline-start: 1px solid var(--line-soft); }
.value-item:first-child { padding-inline-start: 24px; }
.value-item:last-child { padding-inline-end: 24px; }
.value-item:hover {
  background: var(--card);
  border-color: var(--line);
  transform: translateY(-4px);
  box-shadow: var(--hx-shadow-hover);
}
.value-item h3 { font-size: 1.08rem; }

/* ---------- About — calm and rounded, glass badge ---------- */
.about-media .photo-frame { border-radius: var(--hx-r-lg); border-color: var(--line-soft); }
.about-media::before { display: none; }
.about-badge {
  background: rgba(255, 253, 247, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(26, 39, 64, .12);
  border-radius: var(--hx-r-md);
  box-shadow: 0 18px 36px -22px rgba(26, 39, 64, .4);
}
.about-badge .gold-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--gold-text);
  color: var(--gold-text);
  filter: none;
}
.about-badge span { color: var(--ink-2); }
.stat .num { font-size: 2.4rem; letter-spacing: -.02em; }

/* ---------- Process — open stepper with ghost numerals ---------- */
.process-grid { gap: clamp(18px, 2.4vw, 30px); counter-reset: step; }
.process-step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 6px 8px;
  box-shadow: none;
  transition: border-color .3s ease;
}
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 16px;
  inset-inline-start: auto;
  inset-inline-end: 4px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(26, 39, 64, .16);
}
.process-step:hover {
  background: transparent;
  border-top-color: var(--gold-deep);
  transform: none;
  box-shadow: none;
}
.process-step h3 { font-size: 1.05rem; }

/* ---------- Testimonials — soft modern quotes ---------- */
.testi-track { gap: 22px; }
.testi-card {
  border-radius: var(--hx-r-lg);
  border-color: var(--line-soft);
  padding: 34px 30px 28px;
  box-shadow: var(--hx-shadow);
}
.testi-card .quote-mark {
  font-size: 2.6rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}
.testi-card blockquote { font-size: 1.07rem; line-height: 1.8; }
@media (hover: hover) {
  .testi-card:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: var(--hx-shadow-hover);
  }
}

/* ---------- Articles — inset photos, glass tags ---------- */
.articles-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
}
.article-card {
  position: relative;
  padding: 14px 14px 0;
  background: var(--card);
  border-radius: var(--hx-r-lg);
  border-color: var(--line-soft);
  box-shadow: var(--hx-shadow);
}
.article-media {
  border-radius: var(--hx-r-sm);
  overflow: hidden;
}
.article-media::after {
  background: linear-gradient(to bottom, rgba(13, 23, 40, .2), transparent 40%);
}
.article-tag {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .65);
  color: #1a2740;
  font-weight: 600;
}
.article-body { padding: 22px 12px 24px; }
.article-body h3 { font-size: 1.2rem; letter-spacing: -.01em; }
@media (hover: hover) {
  .article-card:hover {
    transform: translateY(-5px);
    border-color: var(--line);
    box-shadow: var(--hx-shadow-hover);
  }
}
/* Neutralize the old horizontal "featured" treatment — three equal stories */
.article-card:first-child { grid-column: auto; flex-direction: column; }
.article-card:first-child .article-media { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
.article-card:first-child .article-media img { position: static; }
.article-card:first-child .article-body { justify-content: flex-start; padding: 22px 12px 24px; }
.article-card:first-child .article-body h3 { font-size: 1.2rem; }
.article-card:first-child .article-body p { font-size: .94rem; }

/* ---------- CTA — full-bleed navy band, same as the inner pages ---------- */
.cta-inner { max-width: 880px; }
.cta-inner h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -.02em;
}
.cta-inner p { margin-bottom: 34px; }

/* ---------- Contact — modern form + grouped info panel ---------- */
.contact-form {
  border-radius: var(--hx-r-lg);
  border-color: var(--line-soft);
  box-shadow: 0 20px 44px -34px rgba(26, 39, 64, .4);
}
.field input, .field select, .field textarea {
  background: #fff;
  border: 1px solid rgba(26, 39, 64, .14);
  border-radius: 12px;
}
.contact-form .btn { border-radius: 999px; }

/* both cards close on the same baseline: the aside stretches to the form's height */
.contact-grid { align-items: stretch; }
.contact-aside {
  gap: 0;
  background: var(--card);
  border: var(--hx-border);
  border-radius: var(--hx-r-lg);
  padding: 8px 24px;
  box-shadow: var(--hx-shadow);
  display: flex;
  flex-direction: column;
}
.info-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 20px 0;
  box-shadow: none;
  align-items: center;
  flex: 1;
}
.info-card:first-child { border-top: 0; padding-top: 20px; }
.info-card:hover { background: transparent; transform: none; box-shadow: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .practice-grid { gap: 16px; }
  .practice-card { padding: 22px 22px 26px; }
  .p-media { height: 185px; margin-bottom: 18px; }
  .practice-card.featured { column-gap: 24px; padding: 22px; }
  .practice-card.featured .p-media { min-height: 280px; }
  .p-flag { top: 34px; inset-inline-start: 34px; }

  .values-grid { gap: 14px; }
  .value-item { padding: 24px 20px 20px; border-top: 0; }
  .value-item + .value-item { border-inline-start: 1px solid var(--line-soft); }
  .value-item:first-child { padding-inline-start: 20px; }
  .value-item:last-child { padding-inline-end: 20px; }
}

@media (max-width: 900px) {
  .practice-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .practice-card, .practice-card:nth-child(even) { row-gap: 0; }
  .practice-card.featured {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "media"
      "icon"
      "title"
      "desc"
      "points"
      "link";
    row-gap: 0;
    padding: 22px 22px 26px;
  }
  .practice-card.featured .p-media {
    height: 230px;
    min-height: 0;
    margin: 0 0 18px;
  }
  .practice-card.featured > .p-icon { margin-bottom: 16px; }
  .p-flag { top: 34px; inset-inline-start: 34px; }

  .articles-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

}

@media (max-width: 560px) {
  .value-item { padding: 22px 18px 18px; }
  .value-item:first-child { padding-inline-start: 18px; }
  .value-item:last-child { padding-inline-end: 18px; }

  .process-step { padding: 20px 4px 6px; }
  .process-step::before { font-size: 1.7rem; }

  .contact-aside { padding: 4px 20px; }
  .info-card { padding: 16px 0; }
}

/* ---------- Honors & media (הוקרות ומוניטין) ---------- */
.honors {
  background: linear-gradient(175deg, var(--navy) 0%, var(--navy-2) 100%);
  padding-block: clamp(88px, 10vw, 132px);
}
.honors .section-head h2 { color: var(--on-dark); }
.honors .section-head p { color: var(--on-dark-2); }
.honors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
}
.honor-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(201, 160, 99, .28);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.honor-card:hover { transform: translateY(-4px); border-color: rgba(201, 160, 99, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.honor-media { aspect-ratio: 16 / 9; overflow: hidden; }
.honor-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.honor-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; align-items: flex-start; }
.honor-tag {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-light);
  border: 1px solid rgba(201, 160, 99, .45);
  border-radius: 999px;
  padding: 5px 14px;
}
.honor-body h3 { color: var(--on-dark); font-size: 1.35rem; }
.honor-body p { color: var(--on-dark-2); font-size: .98rem; flex-grow: 1; }
.honors .card-link { color: var(--gold-light); }
.honors .card-link:hover { color: #fff; }
.press-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(18px, 2.4vw, 30px);
}
.press-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: calc(var(--radius) + 4px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.press-item:hover { border-color: rgba(201, 160, 99, .5); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.press-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #16233c, var(--navy-2));
  border: 1px solid rgba(201, 160, 99, .4);
}
.press-ico .ico { width: 21px; height: 21px; }
.press-item b { display: block; color: var(--on-dark); font-weight: 600; margin-bottom: 4px; }
.press-item div > span { color: var(--on-dark-2); font-size: .92rem; line-height: 1.7; display: block; }
@media (max-width: 900px) {
  .honors-grid, .press-row { grid-template-columns: 1fr; }
}