/* ============================================================
   ADON MEDIA — homepage sections

   Three structures the rest of the site did not need: a services
   explorer, a connected rail, and a numbered flow. Each is here
   because the content it carries would read worse as a card grid.

   Everything is written in logical properties, so Hebrew mirrors
   structurally rather than through a stylesheet fork.
   ============================================================ */

/* ============================================================
   SERVICES EXPLORER

   Six radios, six panels, no script. `:has()` on the container
   reads which radio is checked and reveals the matching panel, so
   arrow-key navigation between radios — which browsers give a radio
   group for free — moves between services, and the section still
   works with JavaScript disabled.
   ============================================================ */
.svc{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(22px,3.4vw,52px);margin-block-start:clamp(26px,3.4vw,44px);
  align-items:start;
}
.svc-tabs{display:flex;flex-direction:column;border-block-start:1px solid var(--line)}

.svc-tab{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding-block:clamp(13px,1.5vw,17px);border-block-end:1px solid var(--line);
  cursor:pointer;position:relative;
}
.svc-tab input{position:absolute;opacity:0;inline-size:1px;block-size:1px;margin:0}
.svc-tab-n{
  font-family:var(--display);font-weight:650;font-size:11.5px;letter-spacing:.1em;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.svc-tab-t{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:clamp(16px,1.75vw,20px);letter-spacing:-.012em;line-height:1.2;
  color:var(--ink-2);transition:color .3s cubic-bezier(.16,1,.3,1);
}
.svc-tab .icon{
  color:var(--blue-ink);opacity:0;
  translate:-6px 0;
  transition:opacity .3s cubic-bezier(.16,1,.3,1), translate .3s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .svc-tab .icon{transform:scaleX(-1);translate:6px 0}

.svc-tab:hover .svc-tab-t{color:var(--ink)}
.svc-tab:has(input:checked) .svc-tab-t{color:var(--ink)}
.svc-tab:has(input:checked) .svc-tab-n{color:var(--blue-ink)}
.svc-tab:has(input:checked) .icon{opacity:1;translate:0 0}
/* the active rule, drawn on the inline edge rather than as a 3px border */
.svc-tab::after{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;inline-size:2px;
  background:var(--blue-ink);scale:1 0;transform-origin:50% 100%;
  transition:scale .36s cubic-bezier(.16,1,.3,1);
}
.svc-tab:has(input:checked)::after{scale:1 1}
.svc-tab:has(input:focus-visible){outline:2px solid var(--blue-ink);outline-offset:2px}

.svc-panels{position:relative}
.svc-panel{display:none}
.svc-tabs:has([value="webdev"]:checked)     ~ .svc-panels [data-svc="webdev"],
.svc-tabs:has([value="ecommerce"]:checked)  ~ .svc-panels [data-svc="ecommerce"],
.svc-tabs:has([value="redesign"]:checked)   ~ .svc-panels [data-svc="redesign"],
.svc-tabs:has([value="marketing"]:checked)  ~ .svc-panels [data-svc="marketing"],
.svc-tabs:has([value="seo"]:checked)        ~ .svc-panels [data-svc="seo"],
.svc-tabs:has([value="management"]:checked) ~ .svc-panels [data-svc="management"]{
  display:block;animation:svc-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes svc-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .svc-panel{animation:none !important}
  .svc-tab .icon,.svc-tab::after,.svc-tab-t{transition:none}
}

.svc-shot{
  overflow:hidden;border:1px solid var(--line);background:var(--warm-2);
  aspect-ratio:16/10;
}
.svc-shot img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.svc-body h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(20px,2.2vw,27px);letter-spacing:-.018em;margin-block:18px 8px;
}
.svc-body p{color:var(--ink-2);font-size:16px;max-inline-size:52ch}

@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:26px}
  .svc-panels{order:-1}
}

/* ============================================================
   RAIL — four things that are joined

   The claim in this section is that these are one system. Four
   separate cards would argue the opposite, so the connection is
   drawn: one line through all of them, with the node sitting on it.
   ============================================================ */
.hp-rail{
  list-style:none;margin:clamp(28px,3.6vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);
  position:relative;
}
.hp-rail::before{
  content:'';position:absolute;inset-inline:0;inset-block-start:5px;block-size:1px;
  background:linear-gradient(90deg,
    transparent, var(--line-dark) 6%, var(--line-dark) 94%, transparent);
}
.hp-rail-node{position:relative;padding-block-start:26px}
.hp-rail-dot{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:11px;block-size:11px;border-radius:50%;
  background:var(--midnight);box-shadow:inset 0 0 0 1.5px var(--blue);
  transition:background-color .34s cubic-bezier(.16,1,.3,1),
             box-shadow .34s cubic-bezier(.16,1,.3,1);
}
.hp-rail-node:hover .hp-rail-dot,.hp-rail-node:focus-within .hp-rail-dot{
  background:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 5px rgba(46,107,255,.16);
}
.hp-rail-node h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:clamp(15.5px,1.6vw,18px);letter-spacing:-.01em;line-height:1.25;
  margin-block-end:8px;color:var(--ink-inv);
}
.hp-rail-node p{font-size:14.5px;line-height:1.6;color:var(--ink-inv-2);margin:0}

@media (max-width:860px){
  .hp-rail{grid-template-columns:1fr;gap:0}
  .hp-rail::before{inset-inline:5px auto;inset-block:5px 0;inline-size:1px;block-size:auto;
    background:linear-gradient(180deg,var(--line-dark),transparent)}
  .hp-rail-node{padding-block:0 22px;padding-inline-start:26px}
  .hp-rail-node:last-child{padding-block-end:0}
}

/* ============================================================
   FLOW — a numbered sequence
   ============================================================ */
.hp-flow{
  list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,38px) clamp(22px,3vw,48px);
  counter-reset:flow;
}
.hp-step{
  position:relative;padding-block-start:18px;
  border-block-start:1px solid var(--line);
}
.hp-step-n{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  color:var(--blue-ink);font-variant-numeric:tabular-nums;display:block;
  margin-block-end:9px;
}
.hp-step h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.014em;margin-block-end:7px;
}
.hp-step p{font-size:15px;color:var(--ink-2);margin:0;max-inline-size:40ch}
/* the rule above each step grows in as it is reached */
.hp-step::before{
  content:'';position:absolute;inset-block-start:-1px;inset-inline-start:0;
  block-size:1px;inline-size:0;background:var(--blue-ink);
  transition:inline-size .7s cubic-bezier(.16,1,.3,1);
}
.hp-step.is-in::before{inline-size:100%}
@media (prefers-reduced-motion:reduce){ .hp-step::before{transition:none} }
@media (max-width:860px){ .hp-flow{grid-template-columns:1fr} }

/* The FAQ marker is NOT redefined here: .faq summary::after in styles.css
   already draws the +/- and is part of the committed system. Adding a second
   one put two markers on every question. */

/* ============================================================
   POSTS — the insights row
   ============================================================ */
.hp-posts{
  list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);
}
.hp-post a{
  display:block;text-decoration:none;color:inherit;
  padding-block-start:16px;border-block-start:1px solid var(--line);
  transition:border-color .3s cubic-bezier(.16,1,.3,1);
}
.hp-post a:hover{border-block-start-color:var(--blue-ink)}
.hp-post h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.014em;line-height:1.22;
  margin-block:8px 8px;
}
.hp-post p{font-size:14.5px;color:var(--ink-2);margin:0}
@media (max-width:860px){ .hp-posts{grid-template-columns:1fr} }

.hp-post .cat{
  font-family:var(--display);font-weight:650;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-ink);
}