/*
 * About Us sub-pages — extra content sections (Our Team, Our Values,
 * Why Choose Us, Our Story intro). Project-owned stylesheet; does not
 * touch legacy Elementor/theme CSS. "Our Team" cards use demo/placeholder
 * names, titles, and initials avatars (real names/titles/photos to be
 * supplied later); Our Values / Why Choose Us / Our Story intro carry
 * real company content.
 */

/* Our Story — lead-in intro block (tinted, sits above the existing
   "Built Around Better Apparel Sourcing" two-column section) */
.kzp-story-intro-section {
  background: #f3f6f0;
}

.kzp-story-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px 40px;
}

.kzp-story-intro__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 18px;
}

.kzp-story-intro p {
  font-size: 15px;
  line-height: 1.7;
  color: #4b4f48;
  max-width: 900px;
  margin: 0 0 14px;
}

.kzp-story-intro p:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .kzp-story-intro { padding: 32px 20px 28px; }
  .kzp-story-intro__heading { font-size: 24px; }
}

/* Our Team — hero banner (group photo background + heading/subtext overlay).
   No existing simple "photo + overlay + heading" component was available to
   reuse directly: Home/Products' own heroes (.kzb-hero / .kz-hero) are
   bespoke, heavy systems (WebGL/canvas/particle effects tightly coupled to
   their own page-specific JS) unsuited to a one-off static banner, and the
   About Us landing page's own PageImage-driven hero has no text-overlay
   styling at all to copy (its heading lives in a separate section below
   it). This is a small new, but visually consistent, treatment: same
   overlay-on-photo approach as those heroes, same typography scale as the
   rest of this file. Image itself comes from the same PageImage mechanism
   already used for the About Us family's own hero_bg slots -- see
   $img['hero_bg'] in about-our-team.blade.php, admin-editable via
   /admin/page-images exactly like every other PageImage slot. */
.kzp-team-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  isolation: isolate;
}

.kzp-team-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 14, .55), rgba(12, 20, 14, .72));
  z-index: -1;
}

.kzp-team-hero__content {
  max-width: 720px;
}

/* Specificity note: the legacy theme's ".entry-content h1" rule (class +
   element = higher specificity than a single class) was silently winning
   over a plain ".kzp-team-hero__heading" rule and forcing this to a dark
   grey instead of white -- scoped under .kzp-team-hero here to beat it. */
.kzp-team-hero .kzp-team-hero__heading {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.kzp-team-hero__subtext {
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

@media (max-width: 768px) {
  .kzp-team-hero { min-height: 280px; padding: 44px 20px; }
  .kzp-team-hero__heading { font-size: 28px; }
}

@media (max-width: 480px) {
  .kzp-team-hero { min-height: 240px; }
  .kzp-team-hero__heading { font-size: 24px; }
  .kzp-team-hero__subtext { font-size: 14px; }
}

.kzp-team {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.kzp-team__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 10px;
}

.kzp-team__subheading {
  font-size: 14px;
  color: #6b7268;
  margin: 0 0 32px;
}

.kzp-team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}

.kzp-team__card {
  min-width: 0;
  border: 1px solid #e2e5df;
  border-top: 3px solid #4d7e3e;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  text-align: center;
}

.kzp-team__photo {
  width: 96px;
  height: 96px;
  margin: 24px auto 0;
  border-radius: 50%;
  background: #4d7e3e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kzp-team__initials {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}

.kzp-team__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.kzp-team__name {
  display: block;
  margin: 16px 16px 2px;
  font-size: 16px;
  font-weight: 600;
  color: #1c1f1a;
  overflow-wrap: break-word;
  text-align: center;
}

.kzp-team__title {
  display: block;
  margin: 0 16px 16px;
  font-size: 13px;
  color: #6b7268;
  text-align: center;
}

@media (max-width: 992px) {
  .kzp-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
  .kzp-team__grid { grid-template-columns: 1fr; }
}

/* Our Values ------------------------------------------------------------ */

.kzp-values {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.kzp-values__heading {
  font-size: 30px;
  font-weight: 700;
  color: #1c1f1a;
  text-align: center;
  margin: 0 0 32px;
}

.kzp-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.kzp-value-card {
  min-width: 0;
  border: 1px solid #e2e5df;
  border-left: 3px solid #4d7e3e;
  border-radius: 8px;
  padding: 20px 22px;
  background: #fff;
}

.kzp-value-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1c1f1a;
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.kzp-value-card p {
  font-size: 13.5px;
  color: #6b7268;
  margin: 0;
}

@media (max-width: 992px) {
  .kzp-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
  .kzp-values__grid { grid-template-columns: 1fr; }
}

/* Why Choose K&Z Fashions? ----------------------------------------------- */

.kzp-why {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.kzp-why__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4d7e3e;
  margin: 0 0 10px;
}

.kzp-why__heading {
  font-size: 28px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 32px;
}

.kzp-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}

.kzp-why-card {
  min-width: 0;
  border: 1px solid #e2e5df;
  border-radius: 8px;
  padding: 22px;
  background: #f9faf8;
}

.kzp-why-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1c1f1a;
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.kzp-why-card p {
  font-size: 13.5px;
  color: #6b7268;
  margin: 0;
}

@media (max-width: 992px) {
  .kzp-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
  .kzp-why__grid { grid-template-columns: 1fr; }
}