/* Home page body (design/NUK Oilseal Website.dc.html).
   The design switches its layout at vw <= 900 (isMobile); the same breakpoint is used here.
   Catalog (catalog.css), delivery areas and product tags (site.css) are shared partials. */

/* ---------- shared bits of this page ---------- */
.home-wrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(38px, 6.5vw, 68px) 20px clamp(40px, 6.5vw, 72px); }

/* section heading: .sec-head / .sec-head__eyebrow come from site.css; only the spacing differs here */
.home-head { margin-bottom: 40px; }
.home-head--gallery { margin-bottom: 34px; }
.home-head--flush { margin-bottom: 0; }
.home-head__title { margin: 6px 0 0; font-size: clamp(33.6px, 4.1vw, 48px); font-weight: 700; color: var(--navy); }
.home-head__title--light { color: #fff; }

.home-eyebrow--yellow { background: var(--yellow); color: var(--navy-950); }
[dir="rtl"] .home-arrow { display: inline-block; transform: scaleX(-1); }

.home-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 15px 24px; border-radius: 4px;
  font-size: 21px; font-weight: 700; line-height: 1.75; white-space: nowrap; overflow-wrap: normal;
}
.home-btn--yellow { background: linear-gradient(180deg, var(--yellow-2), var(--yellow)); color: var(--navy-950); box-shadow: 0 3px 0 var(--yellow-press); }
.home-btn--yellow:hover { background: var(--yellow-3); color: var(--navy-950); }
.home-btn--ghost { border: 1px solid var(--border-4); background: #fff; color: var(--navy); }
.home-btn--ghost:hover { border-color: var(--yellow); background: #fffaea; color: var(--navy); }
.home-btn--arrow { padding: 14px 22px; }

/* the site-wide yellow focus ring is kept on the dark sections; on light ones it is under 3:1, so red */
.home-sec:not(.home-gallery) :focus-visible { outline-color: var(--red); }

/* ---------- hero ---------- */
.home-hero { position: relative; overflow: hidden; background-color: var(--navy-700); }
.home-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% center; }
.home-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(93deg, rgba(11,26,72,0.90) 0%, rgba(13,30,82,0.84) 26%, rgba(16,36,95,0.68) 42%, rgba(18,40,104,0.40) 56%, rgba(18,40,104,0.16) 72%, rgba(18,40,104,0) 88%);
}
.home-hero__inner {
  position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(19px, 3.5vw, 37px) 20px clamp(42px, 7vw, 80px);
  display: grid; grid-template-columns: minmax(0, 800px); gap: 46px; align-items: center;
}
.home-hero__brand { display: flex; align-items: center; gap: 16px; }
.home-hero__logo { flex: none; height: 60px; width: auto; background: #fff; padding: 6px 10px; border-radius: 4px; }
.home-hero__company,
.home-hero__title,
.home-hero__sub,
.home-hero__lead { text-shadow: 0 2px 14px rgba(3,8,24,0.55); overflow-wrap: normal; word-break: keep-all; }
.home-hero__company { font-size: 25.2px; font-weight: 700; color: #fff; line-height: 1.4; }
.home-hero__title {
  margin: 22px 0 0; font-weight: 700; font-size: clamp(39.6px, 5vw, 62.4px); line-height: 1.25; color: #fff;
  letter-spacing: -0.015em; text-wrap: pretty; hyphens: manual;
}
.home-hero__title-hl { color: var(--yellow); }
.home-hero__sub { margin: 14px 0 0; font-size: clamp(22.8px, 2.2vw, 27.6px); font-weight: 600; line-height: 1.6; color: var(--yellow-4); }
.home-hero__lead { margin: 16px 0 0; max-width: 580px; font-size: 21.6px; line-height: 1.85; color: #e4ebfb; }
.home-hero__contact {
  margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.22); display: grid; gap: 12px;
  text-shadow: 0 2px 12px rgba(3,8,24,0.5); overflow-wrap: normal; word-break: keep-all;
}
.home-hero__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.home-hero__label { font-size: 17.4px; font-weight: 700; letter-spacing: 0.1em; color: var(--yellow); min-width: 62px; }
/* 3px of padding (taken back by the margin) lifts the 22.2px links to a 44px touch target */
.home-hero__tel { padding-block: 3px; margin-block: -3px; color: #eaf0ff; font-size: 22.2px; font-weight: 600; }
.home-hero__tel--lg { color: #fff; font-size: 26.4px; font-weight: 700; }
.home-hero__tel:hover { color: var(--yellow); }

/* Arabic (RTL) puts the text on the right: mirror the shade and the photo */
@media (min-width: 901px) {
  [dir="rtl"] .home-hero::after { background-image: linear-gradient(-93deg, rgba(11,26,72,0.90) 0%, rgba(13,30,82,0.84) 26%, rgba(16,36,95,0.68) 42%, rgba(18,40,104,0.40) 56%, rgba(18,40,104,0.16) 72%, rgba(18,40,104,0) 88%); }
  [dir="rtl"] .home-hero__bg { transform: scaleX(-1); }
}
@media (max-width: 900px) {
  .home-hero::after { background-image: linear-gradient(180deg, rgba(9,20,58,0.95) 0%, rgba(11,26,72,0.93) 55%, rgba(13,30,82,0.90) 100%); }
}

/* ---------- about ---------- */
.home-about { background: linear-gradient(180deg, #fff 0%, #fffaea 48%, #fff 100%); }
.home-about__inner { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 7vw, 74px) 20px clamp(38px, 6vw, 64px); text-align: center; }
/* the design uses text-wrap: balance here; pretty is the site rule (balance breaks translated text) */
.home-about__title { margin: 10px 0 0; font-size: clamp(31.2px, 3.7vw, 44.4px); font-weight: 700; line-height: 1.45; color: var(--navy); text-wrap: pretty; }
.home-about__sub { margin: 26px 0 0; font-size: 26.4px; font-weight: 700; color: var(--ink-2); }
.home-about__text { margin: 14px auto 0; max-width: 880px; font-size: 22.2px; line-height: 1.85; font-weight: 500; color: var(--ink-3); text-wrap: pretty; }
.home-about__sub + .home-about__text { margin-top: 16px; }

/* ---------- products & services ---------- */
.home-products { background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); border-top: 3px solid var(--yellow); }

.home-tabs__bar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--navy); }
/* the tablist holds only the tabs; its basis keeps the catalog link beside the last row on desktop
   and pushes it to its own line on phones, as the single flex row of the design does */
.home-tabs__list { flex: 1 1 560px; display: flex; flex-wrap: wrap; gap: 6px; }
.home-tabs__tab {
  display: flex; align-items: baseline; gap: 9px; padding: 13px clamp(13px, 2.2vw, 22px);
  background: transparent; color: var(--ink-4); border: none; border-radius: 5px 5px 0 0; cursor: pointer;
  font-size: 20.4px; font-weight: 600; text-align: start;
}
.home-tabs__tab:hover { background: var(--surface-4); color: var(--navy); }
.home-tabs__tab[aria-selected="true"] { background: var(--navy); color: #fff; cursor: default; font-weight: 700; }
.home-tabs__no { font-size: 15.6px; font-weight: 700; color: var(--muted-3); }
.home-tabs__tab[aria-selected="true"] .home-tabs__no { color: var(--yellow); }
.home-tabs__all { margin-block: -4px 4px; margin-inline-start: auto; align-self: flex-end; padding: 10px 16px; font-size: 18.6px; font-weight: 600; color: var(--red); }
.home-tabs__all:hover { color: var(--navy); }

.home-tabs__panels { display: grid; gap: 22px; }
.home-tabs__panel { background: #fff; border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.home-tabs__panel:focus-visible { outline-offset: -3px; }
.home-tabs__main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.home-tabs__intro {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-600) 100%); padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.home-tabs__big { font-size: 72px; font-weight: 700; line-height: 1; color: var(--yellow); letter-spacing: -0.03em; }
.home-tabs__title { margin: 0; font-size: 28.8px; font-weight: 700; line-height: 1.55; color: #fff; text-wrap: pretty; }
.home-tabs__rule { display: block; width: 56px; height: 3px; background: var(--yellow); }
.home-tabs__body { padding: clamp(26px, 5vw, 48px) clamp(20px, 4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.home-tabs__text { margin: 0; font-size: 21.6px; line-height: 2; font-weight: 500; color: var(--ink-3); text-wrap: pretty; }
.home-tabs__cat { align-self: flex-start; margin-top: 14px; padding: 6px 0; font-size: 18.6px; font-weight: 600; color: var(--red); }
.home-tabs__cat:hover { color: var(--navy); }

.home-tabs__cards { border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 1px; background: var(--border); }
.home-tabs__card { background: #fff; padding: clamp(22px, 4vw, 30px) clamp(20px, 3.5vw, 32px); }
.home-tabs__card-title { margin: 0; font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.home-tabs__card-text { margin: 12px 0 0; font-size: 20.4px; line-height: 1.85; font-weight: 500; color: var(--ink-4); text-wrap: pretty; }
.home-tabs__card-title + .home-tabs__card-text { margin-top: 12px; }
.home-tabs__oem { border-top: 1px solid var(--border); padding: clamp(24px, 4vw, 34px) clamp(20px, 3.5vw, 42px) 38px; background: var(--surface-5); }
.home-tabs__oem-title { margin: 0 0 18px; font-size: 23.4px; font-weight: 700; color: var(--navy); line-height: 1.55; }
.home-tabs__oem-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px 32px; }
.home-tabs__oem-list li { padding-inline-start: 16px; border-inline-start: 3px solid var(--yellow); font-size: 20.4px; line-height: 1.85; font-weight: 500; color: var(--ink-4); text-wrap: pretty; }

.home-highlights {
  margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.home-highlights__item { display: block; background: linear-gradient(150deg, #fffaea, #fff 70%); padding: clamp(20px, 3.5vw, 26px) clamp(18px, 3vw, 28px); }
.home-highlights__item:hover { background: #fff3cf; }
.home-highlights__label { display: block; font-size: 15.6px; font-weight: 700; letter-spacing: 0.12em; color: var(--red); }
.home-highlights__title { display: block; margin-top: 8px; font-size: 23.4px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.home-highlights__label:only-child, .home-highlights__title:only-child { margin-top: 0; }
.home-highlights .home-highlights__item:focus-visible { outline-offset: -3px; }

/* ---------- gallery teaser ---------- */
.home-gallery { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-600) 55%, var(--navy) 100%); }
.home-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.home-gallery__item { margin: 0; background: #fff; border-radius: 4px; overflow: hidden; }
.home-gallery__media { background: #fff; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 12px; }
.home-gallery__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.home-gallery__cap { padding: 11px 14px; font-size: 18.6px; font-weight: 700; color: var(--navy-950); background: var(--yellow); }
.home-gallery__more { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.home-gallery__hint { font-size: 19.8px; color: var(--border-5); }

/* ---------- contact ---------- */
.home-contact { background: #fff; border-top: 3px solid var(--yellow); }
.home-contact__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(34px, 5.5vw, 58px) 20px clamp(36px, 6vw, 62px); }
.home-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 30px; align-items: start; }
.home-contact__addr { margin: 20px 0 0; font-size: 22.2px; line-height: 1.85; font-weight: 500; color: var(--ink-3); }
.home-contact__lead { margin: 12px 0 0; font-size: 20.4px; line-height: 1.8; color: var(--muted); }
.home-contact__btns { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

.home-contact__cards { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.home-contact__cards:empty { display: none; }
.home-contact__card {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 20px 22px;
  background: linear-gradient(160deg, #fff6e0, #fff 70%); border-top: 4px solid var(--yellow);
}
.home-contact__card--yellow:hover { background: linear-gradient(160deg, #ffedc0, #fffdf6 70%); }
.home-contact__card--red { background: linear-gradient(160deg, #ffeef0, #fff 70%); border-top-color: var(--red); }
.home-contact__card--red:hover { background: linear-gradient(160deg, #ffdde1, #fffafa 70%); }
.home-contact__card--line { background: linear-gradient(160deg, #eaf8ef, #fff 70%); border-top-color: var(--line); }
.home-contact__card--line:hover { background: linear-gradient(160deg, #d7f2e1, #fbfffc 70%); }
.home-contact__card--mail { background: linear-gradient(160deg, var(--surface-3), #fff 70%); border-top-color: var(--navy); }
.home-contact__card--mail:hover { background: linear-gradient(160deg, #e2e7f5, #fbfcff 70%); }
.home-contact__card:focus-visible { outline-offset: -3px; }
.home-contact__label { font-size: 19.8px; color: var(--muted); }
.home-contact__value { font-size: 26.4px; font-weight: 700; color: var(--red); }
.home-contact__card--line .home-contact__value { font-size: 22.8px; color: var(--navy); }
.home-contact__card--mail .home-contact__value { font-size: 21.6px; color: var(--navy); }