/* =========================================================
   EUROTEST — TUNING / OVERRIDES
   =========================================================
   Purpose:
   Small visual adjustments to the main site styles.

   Keep this file for site-specific refinements rather than
   changing the main stylesheet whenever possible.
   ========================================================= */


/* =========================================================
   SCROLL BEHAVIOR
   =========================================================
   site.css sets html{scroll-behavior:smooth} globally, which
   makes the browser animate the jump to a #hash target present
   in the URL on the very first paint (arriving from another
   page's quick-nav link) — a jarring "start at header, then
   glide down" effect. Keep the initial landing instant, and
   only turn smooth scrolling on (via .smooth-scroll, added by
   site.js after load) for anchor clicks made once the page is
   already open.
   ========================================================= */

html {
  scroll-behavior: auto;
}

html.smooth-scroll {
  scroll-behavior: smooth;
}


/* =========================================================
   HERO PHOTO CROSSFADE
   =========================================================
   .hero__photo keeps its site.css background-image as a static
   no-JS fallback. site.js layers two absolutely-positioned divs
   on top of it and cross-fades between equipment photos.
   ========================================================= */

.hero__photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.18);
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero__photo-layer.is-active {
  opacity: 1;
}

/* Slow vertical pan for the full 20s a photo is on screen; direction
   alternates per photo (up→down, then down→up, ...). Pan distance and
   duration are both scaled up from an original 7s/±3% baseline so the
   pan speed stays the same, just covering more of the photo. scale(1.18)
   on the base rule gives enough overscan so it never shows an edge. */
.hero__photo-layer.pan-down {
  animation: hero-pan-down 20s ease-in-out forwards;
}

.hero__photo-layer.pan-up {
  animation: hero-pan-up 20s ease-in-out forwards;
}

@keyframes hero-pan-down {
  from { transform: scale(1.18) translateY(-8.57%); }
  to   { transform: scale(1.18) translateY(8.57%); }
}

@keyframes hero-pan-up {
  from { transform: scale(1.18) translateY(8.57%); }
  to   { transform: scale(1.18) translateY(-8.57%); }
}


/* =========================================================
   FOOTER LOGO — natural color, matching the header
   =========================================================
   site.css inverts this to solid white via filter, which also
   amplifies the low-res GIF's edge speckle at larger sizes. Full
   color reads cleanly and matches the header treatment. (Revisit
   once the logo is redone as an SVG vector.)
   ========================================================= */

.brand--footer img {
  filter: none;
  opacity: 1;
}


/* =========================================================
   HEADER
   ========================================================= */

/* Header height */
.nav-wrap {
  min-height: 54px;
}


/* Brand */
.brand {
  font-size: 0.78rem;
  letter-spacing: 0.045em;
}

.brand img {
  width: 198px;
}


/* Main navigation */
.primary-nav {
  gap: 22px;
  font-size: 0.78rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero h1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.12;
}


/* Hero buttons */
.hero__actions .button {
  padding: 21px 31px;

  font-size: 1.48rem;
  letter-spacing: 0.035em;
}


/* Hero facts */
.hero__facts {
  gap: 42px;
  padding: 8px 45px;
}

.hero__facts div + div {
  padding-left: 42px;
}

.hero__facts strong {
  font-size: 0.75rem;
}

.hero__facts span {
  font-size: 0.66rem;
}


/* =========================================================
   INNER PAGE HERO (non-homepage hero, shorter)
   ========================================================= */

.hero--inner {
  min-height: 400px;
}

/* Any direct .container child of .hero must be a positioned element,
   or CSS stacking rules put the absolutely-positioned .hero__overlay
   on top of it, hiding the hero text (acreditare.html's container
   lacked .hero__content and its text was invisible behind the
   overlay). Pages already using .hero__content are unaffected. */
.hero > .container {
  position: relative;
}


/* =========================================================
   CROPPED DOCUMENT PREVIEW (acreditare/autorizare certificate)
   =========================================================
   Shows only the first page of a tall, multi-page scan in the
   page thumbnail; the full scrollable scan opens in the lightbox.
   ========================================================= */

.certificate__preview {
  display: block;
  width: min(100%, 440px);
  aspect-ratio: 640 / 900;
  overflow: hidden;
  margin: auto;
  box-shadow: 0 12px 26px #0d254625;
  cursor: zoom-in;
}

.certificate__preview img {
  width: 100%;
  display: block;
}


/* =========================================================
   LIGHTBOX (equipment photo gallery, dotari page)
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(9, 20, 38, 0.88);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-visible {
  opacity: 1;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  cursor: default;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.lightbox.is-visible .lightbox__image {
  transform: scale(1);
}

.lightbox__close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.26);
}

body.lightbox-open {
  overflow: hidden;
}

/* Scrollable variant: for long, multi-page document scans that
   shouldn't be squeezed to fit the viewport — the overlay itself
   scrolls instead of shrinking the image. */
.lightbox.is-scroll {
  align-items: flex-start;
  overflow-y: auto;
  cursor: default;
}

.lightbox.is-scroll .lightbox__image {
  max-height: none;
  width: min(90vw, 640px);
  margin: 60px auto;
  cursor: default;
}

@media (max-width: 600px) {
  .lightbox {
    padding: 20px;
  }

  .lightbox__close {
    top: 12px;
    right: 12px;
  }
}

.hero--inner .hero__content {
  padding: 70px 0 90px;
}

@media (max-width: 600px) {
  .hero--inner {
    min-height: 460px;
  }

  .hero--inner .hero__content {
    padding: 60px 0 130px;
  }
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.intro.section,
.domains.section {
  padding-block: 52px;
}


/* Typography used inside content sections */
.domains h2,
.domain-card h3,
.assurance h2,
.assurance h3 {
  font-family: Arial, sans-serif;
}


/* =========================================================
   HOMEPAGE DOMAINS SECTION — lead with the technical label
   =========================================================
   Visitors here are collaborators looking for test domains, not
   marketing copy: "Domenii de încercare" is promoted to heading
   size (matching "Competențe definite, prezentate clar."), and
   the supporting blurb is pushed down in emphasis.
   ========================================================= */

#domenii .section-heading .eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 2px;
}

#domenii .section-heading h2 {
  font-size: clamp(1.2rem, 2.16vw, 1.98rem);
  white-space: nowrap;
}

#domenii .section-heading > p {
  font-size: 0.78rem;
  max-width: 260px;
}


/* =========================================================
   DOMAIN CARDS
   ========================================================= */

.domain-card {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.domain-card h3 {
  margin: 10px auto;
}


/* =========================================================
   ASSURANCE SECTION
   ========================================================= */

.assurance__panel {
  padding-block: 52px;
}


/* =========================================================
   PROCESS SECTION
   ========================================================= */

.process-list li strong {
  display: block;

  margin-top: 9px;

  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}


/* =========================================================
   AUTHORIZATION DOCUMENT
   =========================================================
   Centers the authorization JPG on the page and prevents
   the image from being stretched.
   ========================================================= */

/* Center document image */
.authorization-document__image {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.authorization-document__image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* Center document heading */
.authorization-document__header {
  text-align: center;
}

.authorization-document__header > div {
  width: 100%;
}


/* =========================================================
   DESKTOP � 901px AND ABOVE
   ========================================================= */

@media (min-width: 901px) {

  /*
   * Use a 12-column grid for the domain cards.
   * First 8 cards: 4 cards per row.
   * Remaining cards: 3 cards per row.
   */

  .domain-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .domain-card {
    grid-column: span 3;
  }

  .domain-card:nth-child(n + 9) {
    grid-column: span 4;
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP � 901px AND BELOW
   ========================================================= */

@media (max-width: 900px) {

  .primary-nav {
    top: 54px;
  }

  .nav-wrap {
    min-height: 54px;
  }

  .hero__facts {
    left: 24px;
    right: 24px;
  }

}


/* =========================================================
   MOBILE � 600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

  /* Brand */
  .brand img {
    width: 180px;
  }


  /* Navigation */
  .nav-wrap {
    min-height: 50px;
  }

  .primary-nav {
    top: 50px;
  }


  /* Hero buttons */
  .hero__actions .button {
    padding: 18px 20px;
    font-size: 1.05rem;
  }


  /* Hero facts */
  .hero__facts {
    gap: 18px;
    padding: 8px 20px;
  }

  .hero__facts div + div {
    padding-left: 0;
  }

  .hero__facts strong {
    font-size: 0.75rem;
  }

  .hero__facts span {
    font-size: 0.66rem;
  }


  /* Sections */
  .intro.section,
  .domains.section {
    padding-block: 38px;
  }


  /* Assurance */
  .assurance__panel {
    padding-block: 38px;
  }

}


/* =========================================================
   TESTS LIST (domain pages)
   ========================================================= */

.tests-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}

.tests-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tests-list li span {
  flex: none;
  color: var(--red);
  font: 800 0.68rem Manrope, sans-serif;
  letter-spacing: 0.08em;
}

.domain-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #58708a;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.domain-back:hover {
  color: var(--red);
}

@media (max-width: 700px) {
  .tests-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-info dl {
  margin: 0 0 29px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.contact-info dl div {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.contact-info dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #627286;
  font-weight: 800;
}

.contact-info dd {
  margin: 0;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.5;
}

.contact-info dd a {
  text-decoration: underline;
}

.contact-map {
  background: var(--gray);
  padding: 16px;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.contact-map figcaption {
  padding: 14px 4px 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #596a7e;
}

@media (max-width: 700px) {
  .contact-map iframe {
    height: 280px;
  }
}


/* =========================================================
   EQUIPMENT GRID (dotari page)
   ========================================================= */

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.equipment-card {
  background: #fff;
  display: flex;
  flex-direction: column;
}

.equipment-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}

.equipment-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.equipment-card:hover .equipment-card__photo img {
  transform: scale(1.06);
}

.equipment-card figcaption {
  padding: 14px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 900px) {
  .equipment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   LEGAL PAGES (cookies / privacy policy)
   ========================================================= */

.legal {
  max-width: 780px;
}

.legal h4 {
  font: 800 0.95rem "Roboto Slab", Georgia, serif;
  color: var(--navy);
  margin: 38px 0 12px;
}

.legal p {
  margin: 0 0 16px;
  color: #35455a;
  font-size: 0.94rem;
}

.legal p:first-of-type {
  margin-top: 0;
}


/* =========================================================
   DOMAIN QUICK-NAV (compact vertical menu, domain pages)
   ========================================================= */

.tests-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 44px;
  align-items: start;
}

.domain-nav {
  background: #fff;
  border: 1px solid var(--line);
}

.domain-nav__label {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--red);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.domain-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.domain-nav li {
  border-bottom: 1px solid var(--line);
}

.domain-nav li:last-child {
  border-bottom: 0;
}

.domain-nav a {
  display: block;
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.domain-nav a:hover {
  color: var(--red);
}

.domain-nav a.is-current {
  background: var(--gray);
  color: var(--red);
  font-weight: 800;
}

@media (max-width: 900px) {
  .tests-layout {
    grid-template-columns: 1fr;
  }

  .domain-nav {
    order: 2;
  }

  .tests-list {
    order: 1;
  }
}

/* Land on the tests section (not the header) when arriving from another
   domain page's quick-nav link. */
#incercari {
  scroll-margin-top: 118px;
}

@media (max-width: 900px) {
  #incercari {
    scroll-margin-top: 90px;
  }
}