/* ============================================================================
   EA sell-page layout tweaks (IndustrySearch landing).
   #1  "See how it works" — two videos side by side (2 columns).
   #2  "What is IndustrySearch" — content condensed into 4 columns.
   ============================================================================ */

/* ── #1: two videos side by side ── */
.ea-video-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.ea-video-col {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 560px;
}
.ea-video-caption {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #434343;
  margin-bottom: 4px;
}
/* The shared .embed-container carries a 50px top margin + 853px cap meant for a single centred
   video; in the 2-col grid the column controls the width and the caption gives the spacing. */
.ea-video-2col .embed-container {
  margin-top: 12px;
  max-width: none;
}
@media (max-width: 767px) {
  .ea-video-col { flex-basis: 100%; max-width: 100%; }
}

/* ── #2: "What is IndustrySearch" in 4 columns ── */
.why-4col-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  padding: 20px 0;
}
.why-col {
  flex: 1 1 calc(25% - 18px);
  max-width: calc(25% - 18px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.why-col-img {
  margin-bottom: 18px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-col-img img {
  max-width: 180px;
  width: 100%;
  height: auto;
}
.why-col h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.why-col p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
/* Tablet → 2 columns, mobile → 1 column. */
@media (max-width: 1024px) {
  .why-col { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
  .why-4col-grid { flex-direction: column; }
  .why-col { flex-basis: auto; max-width: 100%; }
  .why-col-img { min-height: 0; }
}

/* ============================================================================
   Round 2 tweaks
   ============================================================================ */

/* #1 — "See how it works" videos a touch wider. The shared .wrap is a fixed width:1100px, so widen it. */
#comvideo .wrap { width: auto !important; max-width: 1240px !important; }
.ea-video-col { max-width: 600px; }

/* #2 — align the text across the 4 columns (equal image-block + heading heights so the paragraphs line
   up) + a little more width/spacing. The shared .wrap is a fixed width:1100px so widen it; the column
   basis must account for the larger gap (col width = 25% - 0.75*gap) or column 4 wraps. */
.why-4col .wrap { width: auto !important; max-width: 1240px !important; }
.why-4col-grid { gap: 28px; }
.why-col { flex-basis: calc(25% - 21px); max-width: calc(25% - 21px); }
.why-col-img { height: 180px; min-height: 0; }
.why-col h3 { min-height: 70px; }
@media (max-width: 1024px) { .why-col { flex-basis: calc(50% - 14px); max-width: calc(50% - 14px); } }

/* #3 — shrink the "Why suppliers love IndustrySearch" section + everything in it by ~20%. */
#features.features { zoom: 0.8; }

/* #5 — top navbar nudged slightly left + a coloured Get Started CTA.
   The container is a fixed width:1100px (inline <style>) and the menu floats right, so the extra CTA
   made it wrap. Tighten the nav-link spacing just enough that logo + menu + CTA fit the original row
   (keeps the logo near its place), then nudge the whole bar very slightly left. */
@media (min-width: 1100px) {
  #menu .container { width: auto !important; max-width: 1140px !important; }
  #menu .menu ul > li > a:not(.ea-nav-cta) { padding-left: 8px !important; padding-right: 8px !important; }
}
#menu .container { transform: translateX(-10px); }
#menu .ea-nav-cta {
  display: inline-block;
  background-color: #83FFC1 !important;
  color: #434343 !important;
  font-weight: bold;
  border-radius: 22px;
  padding: 8px 22px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
#menu .ea-nav-cta:hover { background-color: #E3FDEE !important; }

/* Responsive resets — kept LAST so they win at small widths. */
@media (max-width: 600px) {
  .why-col-img { height: auto; }
  .why-col h3 { min-height: 0; }
}