/* ==========================================================================
   Toner Shop - Page Content Components (Phase 2)
   Hero, Trust bar, Audience/Service/Product/Hub cards, Package cards +
   comparison table, Feature block, CTA banner.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero-home {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 480px;
  color: var(--color-white);
  padding: var(--space-8) 0;
  text-align: center;
  /* Solid fallback shown for an instant before the photo paints (and if
     it fails to load) - same brand tone as the overlay below. */
  background: var(--color-navy-deep);
}

@media (min-width: 860px) {
  .hero-home {
    min-height: 560px;
  }
}

/* Full-bleed background photo. A plain <img> (not a CSS background-image)
   so it keeps normal image loading/priority behavior; object-fit: cover
   crops it to fill the hero at any viewport width/height without
   distortion. Decorative only (the headline carries the real content),
   so it's alt="" and the whole block is aria-hidden. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Slight permanent overscale so the mouse-parallax shift below (set by
     main.js via --hero-px/--hero-py, desktop pointer:fine only) never
     reveals an edge gap; also reads as a subtle "premium" zoomed-in
     photo treatment even before any movement happens. Real values come
     from JS - the 0 fallback keeps this a no-op with JS disabled. */
  transform: scale(1.06) translate3d(calc(var(--hero-px, 0) * 1px), calc(var(--hero-py, 0) * 1px), 0);
}

.has-js .hero-media img {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Dark brand-color overlay on top of the photo so the white headline,
   paragraph and buttons stay fully legible everywhere in the image,
   including its brightest highlights - verified against the actual
   photo's brightest sampled pixels at >7:1 contrast for white text. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1, 50, 89, 0.82) 0%, rgba(2, 71, 131, 0.78) 100%);
}

/* Ambient glow blobs layered above the photo+overlay (extra tech-y
   accent) but below the text. Purely decorative - ::before/::after are
   never exposed to assistive tech regardless. */
.hero-home::before,
.hero-home::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
}

.has-js .hero-home::before,
.has-js .hero-home::after {
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Same --hero-px/--hero-py mouse-parallax signal as the photo above, but
   each blob moves by its own multiplier - a bit more than the photo, and
   in opposite directions from each other - so the glow reads as sitting
   on its own depth layer instead of pasted flat onto the image. Same
   brand tokens as before this change (--color-brand-cyan / --color-navy
   families via the existing rgba values) - no new colors introduced. */
.hero-home::before {
  width: 440px;
  height: 440px;
  top: -160px;
  inset-inline-end: -120px;
  background: radial-gradient(circle, rgba(0, 168, 232, 0.4), transparent 70%);
  transform: translate3d(calc(var(--hero-px, 0) * 2.2px), calc(var(--hero-py, 0) * 2.2px), 0);
}

.hero-home::after {
  width: 340px;
  height: 340px;
  bottom: -140px;
  inset-inline-start: -100px;
  background: radial-gradient(circle, rgba(2, 71, 131, 0.5), transparent 70%);
  transform: translate3d(calc(var(--hero-px, 0) * -1.6px), calc(var(--hero-py, 0) * -1.6px), 0);
}

.hero-home .container {
  position: relative;
  z-index: 2;
  /* Subtle "recede" as the visitor scrolls the Hero out of view - main.js
     sets --hero-scroll from 0 (top of page) to 1 (Hero fully scrolled
     past), scroll-linked via rAF. A gentle fade + upward drift, not a
     full disappear, so it reads as depth rather than a jump cut. */
  opacity: calc(1 - (var(--hero-scroll, 0) * 0.4));
  transform: translateY(calc(var(--hero-scroll, 0) * -28px));
}

.has-js .hero-home .container {
  will-change: opacity, transform;
}

.hero-home h1 {
  color: var(--color-white);
  max-width: 760px;
  margin: 0 auto var(--space-4);
}

.hero-home p {
  color: #E3F2FB;
  max-width: 620px;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------
   Hero entrance choreography - h1 / p / buttons fade+slide in with a
   staggered delay right after the page paints (JS adds .is-visible via
   main.js's initHeroMotion, a one-time reveal - unlike .animate-on-scroll
   elsewhere, the Hero is already on-screen at load so this isn't
   scroll-triggered). Same hidden/visible pattern and easing curve as
   .animate-on-scroll (animations.css) for one consistent motion feel
   site-wide, kept as its own class because the Hero needs to run once on
   load, not react to scroll position like the rest of the page.
   --------------------------------------------------------------------- */
.has-js .hero-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-js .hero-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.has-js h1.hero-reveal { transition-delay: 0.12s; }
.has-js p.hero-reveal { transition-delay: 0.38s; }
.has-js .hero-actions.hero-reveal { transition-delay: 0.64s; }

/* Stage 4 - the headline's words reveal individually (see .word-reveal in
   animations.css) instead of the whole <h1> fading in as one block, so
   this cancels the block-level fade/translate above specifically for
   h1.hero-reveal--word (higher specificity than .has-js .hero-reveal
   above thanks to the added h1 type selector, so it wins regardless of
   source order) while leaving the shared .hero-reveal rule untouched for
   the subtitle <p> and the actions row, which still fade in as a block. */
.has-js h1.hero-reveal--word {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-home .btn-outline {
  color: var(--color-white);
  border-color: var(--color-white);
}

/* Home-page hero WhatsApp button: transparent like the button next to it
   (owner exception to the white contact-button rule). On hover it only
   gets a light white tint + thicker frame - never a blue fill - so the
   white label and the green WhatsApp icon stay clear. */
.btn-hero-ghost {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-hero-ghost:hover,
.btn-hero-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  border-color: var(--color-white);
  outline: 1px solid var(--color-white);
}

.hero-page {
  padding-top: var(--space-3);
}

.hero-page .lede {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  max-width: 760px;
}

/* ---------------------------------------------------------------------
   Referral note (e.g. "wrong page? go to laptops")
   --------------------------------------------------------------------- */
.referral-note {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  color: var(--color-text);
}

.referral-note a {
  font-weight: var(--fw-semibold);
}

.intro-note {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------
   Trust bar (home page) - 4 floating cards below the Hero. Built on the
   site's existing .card (light bg, thin border, soft shadow+glow, hover
   lift - see components.css/content.css .card + animations.css
   .card:hover) rather than one-off CSS, so these automatically match
   every other card on the site and already get the fade-up scroll-in +
   staggered nth-child delays + hover-lift/shadow-boost defined once,
   generically, in animations.css - nothing new needed for either.
   --------------------------------------------------------------------- */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding: var(--space-6) 0;
}

@media (min-width: 760px) {
  .trust-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Scoped under .trust-bar (not just ".trust-card") so these overrides
   beat the base .card rules (padding/gap/etc., defined further below)
   on specificity rather than depending on source order. */
.trust-bar .trust-card {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.trust-bar .trust-card p {
  margin: 0;
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.trust-bar .trust-card .tb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-chip-blue);
  border: 1px solid var(--color-chip-blue-border);
  font-size: 1.6rem;
}

/* "15 שנות ניסיון" מקבל נגיעת צבע חמה ומבדילה במקום כחול כמו שאר
   האייקונים - תג הישג, לא עוד שירות. הבחירה לפי מיקום (הכרטיסייה
   השנייה) ולא class חדש, כדי לא לגעת ב-HTML/בגנרטור עבור שינוי
   עיצובי בלבד. */
.trust-bar .trust-card:nth-child(2) .tb-icon {
  background: var(--color-chip-warm);
  border-color: var(--color-chip-warm-border);
}

/* Contains the hub cards' off-screen pre-reveal position (see
   animate-on-scroll--slide-right/left in animations.css, translateX
   ±56px) so it can never push the page's scrollable width out past the
   viewport on narrow screens - same technique .hero-home already uses
   for its own off-canvas glow blobs. Scoped to this dedicated class
   (not the shared .section--alt/.hero-page, both used elsewhere too) so
   nothing else on the site is affected. Stage 5 reuses this same class
   on the שירותים/לעסקים/מוצרים hub pages' own card grids (see
   body_hub() in the generator) - same slide-in variants, same
   off-canvas risk, same fix. */
.hub-cards-section {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Generic responsive card grid (services / audience / products / hub)
   --------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 640px) {
  .card-grid--2 { grid-template-columns: 1fr 1fr; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  /* Elevation shadow + a soft colored "glow" halo layered on top, via a
     second box-shadow (not an inset/z-index pseudo-element trick) - this
     keeps the effect safely behind the card's own opaque background and
     immune to stacking-context surprises from unrelated properties
     elsewhere (transform/opacity/will-change on .animate-on-scroll). */
  box-shadow: var(--shadow-resting), var(--glow-card-resting);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card:hover {
  box-shadow: var(--shadow-hover), var(--glow-card-hover);
}

.card .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-chip-blue);
  border: 1px solid var(--color-chip-blue-border);
  font-size: 1.5rem;
}

.card h3 {
  margin-bottom: 0;
}

.card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
  flex-grow: 1;
}

.card .card-link,
.card .btn {
  margin-top: var(--space-2);
  align-self: flex-start;
}

/* Big hub cards (עמודי-על) */
.hub-card {
  padding: var(--space-6);
}

.hub-card h2 {
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------
   Feature block (e.g. professional workstations for architects)
   --------------------------------------------------------------------- */
.feature-block {
  background: var(--color-tint-blue);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}

.feature-block h2 {
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------
   Callout (Feature Callout Box) with H3 sub-items grid
   --------------------------------------------------------------------- */
.callout-subitems {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 700px) {
  .callout-subitems {
    grid-template-columns: repeat(3, 1fr);
  }
}

.callout-subitems h3 {
  font-size: var(--fs-h3-mobile);
  margin-bottom: var(--space-1);
}

.callout-subitems p {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Package cards (retainer / service packages) + comparison table
   --------------------------------------------------------------------- */
.package-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 800px) {
  .package-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.package-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-resting);
}

.package-card.is-featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}

.package-card h3 {
  margin-bottom: var(--space-1);
}

.package-card .package-tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

.package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  flex-grow: 1;
}

.package-card li {
  padding-inline-start: var(--space-5);
  position: relative;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.package-card li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

.table-scroll {
  overflow-x: auto;
  margin-top: var(--space-6);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.compare-table caption {
  text-align: right;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

.compare-table th,
.compare-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: right;
}

.compare-table thead th {
  background: var(--color-bg-alt);
}

/* ---------------------------------------------------------------------
   CTA banner
   --------------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  margin: var(--space-7) 0;
}

.cta-banner h2 {
  color: var(--color-white);
}

.cta-banner p {
  color: #cfe3f0;
  margin-bottom: var(--space-5);
}

.cta-banner .btn-outline {
  color: var(--color-white);
  border-color: var(--color-white);
}

/* ---------------------------------------------------------------------
   Quick action row (lab / contact pages): call / whatsapp / waze / maps
   --------------------------------------------------------------------- */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

/* ---------------------------------------------------------------------
   Pending-info notice (address/hours placeholders) - visually distinct
   from the legal disclaimer/callout so it doesn't read as legal text.
   --------------------------------------------------------------------- */
.pending-note {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------
   AnyDesk button - branded red (see --color-anydesk-red, AA-checked on
   white text), used on the תמיכה-מרחוק page and the home-page banner below.
   --------------------------------------------------------------------- */
.btn-anydesk {
  background: var(--color-anydesk-red);
  border-color: var(--color-anydesk-red);
  color: var(--color-white);
}

.btn-anydesk:hover {
  background: var(--color-anydesk-red-dark);
  border-color: var(--color-anydesk-red-dark);
  color: var(--color-white);
}

.btn-anydesk .btn-icon {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Remote-support banner (home page) - so AnyDesk/תמיכה מרחוק is reachable
   in one click from '/', not only after navigating into the service page.
   --------------------------------------------------------------------- */
.remote-support-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-tint-blue);
  border: 2px solid var(--color-anydesk-red);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 700px) {
  .remote-support-banner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }
}

.remote-support-banner-text h2 {
  margin-bottom: var(--space-1);
}

.remote-support-banner-text p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.remote-support-banner .quick-actions {
  margin: 0;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Google reviews carousel (home page)
   --------------------------------------------------------------------- */
.reviews-carousel {
  max-width: 720px;
  margin: var(--space-5) auto 0;
}

.reviews-track {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-resting);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  /* No-JS floor only - main.js measures every review's real rendered
     height (they vary a lot in length) and sets an inline min-height
     pinned to the tallest one, so the prev/next/dot controls below
     never jitter as slides of different lengths rotate through. */
  min-height: 180px;
}

.review-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.review-slide[hidden] {
  display: none;
}

.review-stars {
  color: var(--color-star-gold);
  font-size: 1.4rem;
  letter-spacing: 2px;
}

.review-quote {
  font-size: var(--fs-body);
  color: var(--color-text);
  max-width: 560px;
  margin-bottom: 0;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.review-name {
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.review-verified {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.reviews-prev,
.reviews-next {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
}

.reviews-prev:hover,
.reviews-next:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.reviews-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.reviews-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
}

.reviews-dot.is-active {
  background: var(--color-accent);
}