/* سبّاق لنقل الأثاث — index.css : hro + srv (no JS: both sections are CSS-only) */

/* ===== hro (8:00 ص — headline + arch photo + day card with clock) ===== */
.sb-hro {
  --sb-hro-card: var(--sb-ink);
  padding-block: 1.5rem 2.5rem;
}
.sb-hro__inner { display: grid; gap: 1.75rem; }
.sb-hro__title { font-size: 1.6rem; font-weight: 800; line-height: 1.4; text-wrap: balance; }
.sb-hro__lead { margin-top: 0.6rem; color: var(--sb-muted); font-size: 0.92rem; max-inline-size: 36rem; }
.sb-hro__feats { margin-top: 0.85rem; display: grid; gap: 0.35rem; }
.sb-hro__feat { display: flex; align-items: center; gap: 0.6rem; color: var(--sb-ink); font-size: 0.86rem; font-weight: 500; line-height: 1.5; }
.sb-hro__icon {
  display: grid; place-items: center; flex: none; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%;
  border: 0.0625rem solid var(--sb-accent); color: var(--sb-accent); font-size: 0.75rem;
}
.sb-hro__cta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sb-hro__visual { position: relative; padding-bottom: 4.5rem; }
.sb-hro__arch {
  inline-size: 78%; margin-inline-start: auto;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sb-arch); background: var(--sb-sand-2);
}
.sb-hro__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sb-hro__card {
  position: absolute; inset-inline-start: 0; bottom: 0; inline-size: min(17rem, 78%);
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.8rem; align-items: center;
  padding: 0.9rem 1rem; border-radius: var(--sb-r);
  background: var(--sb-hro-card); color: var(--sb-on-ink); box-shadow: var(--sb-shadow);
}
.sb-hro__card .sb-clock { --sb-clock-face: var(--sb-ink-2); --sb-clock-ink: var(--sb-on-ink); inline-size: 3.25rem; block-size: 3.25rem; }
.sb-hro__card-title { font-weight: 700; font-size: 0.85rem; line-height: 1.5; }
.sb-hro__plan { grid-column: 1 / -1; display: grid; gap: 0.35rem; position: relative; padding-inline-start: 1rem; }
.sb-hro__plan::before { content: ""; position: absolute; inset-inline-start: 0.2rem; top: 0.45rem; bottom: 0.45rem; inline-size: 0.0625rem; background: var(--sb-on-ink-muted); }
.sb-hro__step { position: relative; display: grid; font-size: 0.76rem; line-height: 1.5; color: var(--sb-on-ink-muted); }
.sb-hro__step::before { content: ""; position: absolute; inset-inline-start: -0.95rem; top: 0.35rem; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--sb-accent); }
.sb-hro__when { color: var(--sb-on-ink); font-weight: 600; font-size: 0.78rem; }

/* load choreography: stamp → headline unmasks → text → arch rises → card slides, clock hands run to 8:00, plan ticks */
@media (prefers-reduced-motion: no-preference) {
  .sb-hro__card { animation: sb-hro-card 0.9s var(--sb-spring) 0.9s both; }
  .sb-hro__card .sb-clock__hand--m { animation: sb-hro-min 1.8s var(--sb-ease) 1.1s both; }
  .sb-hro__card .sb-clock__hand--h { animation: sb-hro-hour 1.8s var(--sb-ease) 1.1s both; }
  .sb-hro__step { animation: sb-hro-tick 0.6s var(--sb-ease) both; }
  .sb-hro__step:nth-child(1) { animation-delay: 1.6s; }
  .sb-hro__step:nth-child(2) { animation-delay: 1.9s; }
  .sb-hro__step:nth-child(3) { animation-delay: 2.2s; }
}
@keyframes sb-hro-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sb-hro-unmask { from { clip-path: inset(0 0 100% 0); transform: translateY(1rem); } to { clip-path: inset(0); transform: none; } }
@keyframes sb-hro-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes sb-hro-arch { from { clip-path: inset(100% 0 0 0 round 50% 50% 0 0); } to { clip-path: inset(0 round 0); } }
@keyframes sb-hro-zoom { from { transform: scale(1.2); } to { transform: none; } }
@keyframes sb-hro-card { from { opacity: 0; transform: translateX(2rem) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes sb-hro-min { from { transform: rotate(-720deg); } to { transform: rotate(0deg); } }
@keyframes sb-hro-hour { from { transform: rotate(180deg); } to { transform: rotate(240deg); } }
@keyframes sb-hro-tick { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: none; } }

/* ===== srv (editorial index with a large photo on every row) ===== */
.sb-srv { padding-block: var(--sb-pad); }
.sb-srv__list { counter-reset: sb-srv; border-bottom: 0.0625rem solid var(--sb-rule); }
.sb-srv__row {
  position: relative; isolation: isolate; counter-increment: sb-srv;
  display: grid; grid-template-columns: 8.5rem 1fr; grid-template-areas: "img name" "img desc" "img go";
  column-gap: 0.9rem; align-items: center;
  padding-block: 0.9rem; border-top: 0.0625rem solid var(--sb-rule);
}
.sb-srv__row::before {
  content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--sb-r);
  background: var(--sb-ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--sb-ease);
}
.sb-srv__img {
  grid-area: img; align-self: stretch; inline-size: 100%; block-size: 100%; min-block-size: 7rem;
  object-fit: cover; border-radius: 1.1rem; background: var(--sb-sand-2);
  transition: transform 0.7s var(--sb-ease), border-radius 0.5s;
}
.sb-srv__name { grid-area: name; font-size: 1rem; font-weight: 700; transition: color 0.35s; }
.sb-srv__name::before {
  content: counter(sb-srv, decimal-leading-zero) " ";
  color: var(--sb-accent); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sb-srv__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.sb-srv__desc { grid-area: desc; color: var(--sb-muted); font-size: 0.84rem; line-height: 1.65; transition: color 0.35s; }
.sb-srv__go {
  grid-area: go; justify-self: start; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%;
  border: 0.0625rem solid var(--sb-ink); color: var(--sb-ink); font-size: 0.8rem;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.5s var(--sb-spring);
}
.sb-srv__link:focus-visible { outline: none; }
.sb-srv__row:focus-within { outline: 0.15rem solid var(--sb-accent); outline-offset: 0.25rem; border-radius: 0.5rem; }

/* ===================== breakpoints ===================== */
@media (min-width: 481px) {
  .sb-hro__title { font-size: 1.85rem; }
  .sb-hro__arch { inline-size: 70%; }
}

@media (min-width: 601px) {
  .sb-hro__visual { max-inline-size: 30rem; inline-size: 100%; justify-self: center; }
}

@media (min-width: 769px) {
  .sb-hro { padding-block: 2.5rem 3rem; }
  .sb-hro__title { font-size: 2.4rem; }
  .sb-hro__lead { font-size: 1rem; }
  .sb-srv__row { grid-template-columns: 15rem 3fr 4fr 2.75rem; grid-template-areas: "img name desc go"; column-gap: 2rem; padding-block: 1rem; }
  .sb-srv__img { block-size: 10.5rem; min-block-size: 0; }
  .sb-srv__name { font-size: 1.35rem; }
  .sb-srv__name::before { display: block; font-size: 0.78rem; }
  .sb-srv__desc { font-size: 0.92rem; }
  .sb-srv__go { justify-self: auto; inline-size: 2.75rem; block-size: 2.75rem; font-size: 0.85rem; }
}
@media (min-width: 769px) and (hover: hover) {
  .sb-srv__row:hover::before { transform: none; }
  .sb-srv__row:hover .sb-srv__name { color: var(--sb-on-ink); }
  .sb-srv__row:hover .sb-srv__desc { color: var(--sb-on-ink-muted); }
  .sb-srv__row:hover .sb-srv__go { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-on-ink); transform: rotate(-45deg) scale(1.1); }
  .sb-srv__row:hover .sb-srv__img { transform: scale(1.04) rotate(-1.5deg); border-radius: 50% 50% 1.1rem 1.1rem / 30% 30% 1.1rem 1.1rem; }
}

@media (min-width: 1025px) {
  .sb-hro { padding-block: 3rem 3.5rem; }
  .sb-hro__inner { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: center; }
  .sb-hro__title { font-size: clamp(2.6rem, 3.5vw, 3.5rem); line-height: 1.3; }
  .sb-hro__visual { max-inline-size: none; padding-bottom: 3rem; }
  .sb-hro__arch { inline-size: 82%; }
  .sb-hro__card { inline-size: 18rem; inset-inline-start: -1.5rem; }
  .sb-srv__row { grid-template-columns: 18rem 3fr 4fr 2.75rem; }
  .sb-srv__img { block-size: 12rem; }
  .sb-srv__name { font-size: 1.6rem; }
}

@media (min-width: 1441px) {
  .sb-hro__card { inset-inline-start: -3rem; }
}