/* =========================================================
   Sourcing Expo Saudi Arabia — additional page styles
   Used by: index.html, why-exhibit.html, why-visit.html,
            kids-toys.html, gifts-homeware.html, stationery-paper.html
========================================================= */

/* ---------- Short inner-page hero ---------- */
.sx-hero {
  position: relative;
  background-color: #182630;
  background-image: linear-gradient(180deg, rgba(24,38,48,0.82), rgba(24,38,48,0.82)), var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sx-hero .container { max-width: 900px; }

/* =========================================================
   PER-PAGE HERO IMAGES — each page has its own class + file.
   TO UPDATE A HERO PHOTO: replace the image file on disk
   (keep the same filename) OR change the url() below.
   Each class is only used on ONE page, so edits here never
   affect any other page's hero.
========================================================= */
.sx-hero--why-exhibit        { --hero-image: url('../images/hero-why-exhibit.jpg'); }
.sx-hero--why-visit          { --hero-image: url('../images/hero-why-visit.jpg'); }
.sx-hero--kids-toys          { --hero-image: url('../images/hero-kids-toys.jpg'); }
.sx-hero--gifts-homeware     { --hero-image: url('../images/hero-gifts-homeware.jpg'); }
.sx-hero--stationery-paper   { --hero-image: url('../images/hero-stationery-paper.jpg'); }

.sx-hero__eyebrow {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #182630;
  margin-bottom: 18px;
}
.sx-hero__title {
  color: #ffffff;
  font-size: 40px;
  line-height: 1.25;
  margin-bottom: 18px;
}
.sx-hero__date {
  color: #f1f1f1;
  font-size: 16px;
  margin-bottom: 14px;
}
.sx-hero__desc {
  color: #cfd6dc;
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 28px;
}
.sx-hero .cta-container { justify-content: center; display: flex; flex-wrap: wrap; gap: 15px; }

@media (max-width: 767px) {
  .sx-hero { min-height: 360px; padding-top: 40px; padding-bottom: 40px; }
  .sx-hero__title { font-size: 28px; }
}

/* ---------- Category accent colors ---------- */
.sx-accent-teal  { background-color: #00b8a0; }
.sx-accent-pink  { background-color: #e8387a; }
.sx-accent-amber { background-color: #f0a500; }
.sx-text-teal  { color: #00b8a0; }
.sx-text-pink  { color: #e8387a; }
.sx-text-amber { color: #f0a500; }
.sx-border-teal  { border-color: #00b8a0 !important; }
.sx-border-pink  { border-color: #e8387a !important; }
.sx-border-amber { border-color: #f0a500 !important; }

/* ---------- Three Product Worlds (homepage) ---------- */
.sx-worlds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.sx-world-card {
  background: #ffffff;
  border: 2px solid #eef0f2;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.sx-world-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.sx-world-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 34px;
  color: #ffffff;
  transition: transform 0.3s ease;
}
.sx-world-card:hover .sx-world-icon { transform: scale(1.08); }
.sx-world-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #182630;
}
.sx-world-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.sx-world-card:hover .sx-world-body {
  max-height: 220px;
  opacity: 1;
  margin-top: 14px;
}
.sx-world-body p {
  font-size: 15px;
  line-height: 1.55;
  color: #55606a;
  margin-bottom: 14px;
}
.sx-world-link {
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
.sx-world-link:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .sx-worlds { grid-template-columns: 1fr; }
  .sx-world-body {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 14px;
  }
}

/* ---------- Icon grid (buyer / audience cards) reused across pages ---------- */
.sx-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  margin: 40px 0;
}
.sx-icon-card {
  text-align: center;
  padding: 20px 10px;
}
.sx-icon-card img { width: 70px; margin-bottom: 14px; }
.sx-icon-card span {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #182630;
}
@media (max-width: 767px) {
  .sx-icon-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Stat / "why Saudi Arabia" checklist ---------- */
.sx-checklist {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
}
.sx-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #33404a;
}
.sx-checklist li img { width: 22px; margin-top: 3px; flex-shrink: 0; }
@media (max-width: 767px) {
  .sx-checklist { grid-template-columns: 1fr; }
}

/* ---------- Category chip grid (used on all Product Sector pages) ---------- */
.sx-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0;
}
.sx-chip {
  padding: 12px 22px;
  border-radius: 30px;
  border: 2px solid #eef0f2;
  font-weight: 600;
  font-size: 15px;
  color: #182630;
  background: #fafafa;
}
.sx-chip.sx-border-teal  { background: #e5f9f6; }
.sx-chip.sx-border-pink  { background: #fdeaf1; }
.sx-chip.sx-border-amber { background: #fdf3e0; }

/* ---------- Section eyebrow / heading helpers ---------- */
.sx-section-pad { padding-top: 90px; padding-bottom: 90px; }
.sx-cta-bar { margin-top: 40px; }