/* ==========================================================================
   Static company pages (about, factories, show-room, certifications, contact).
   Replaces .company-page* selectors from company-pages.css.
   ========================================================================== */

.static-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--gradient-hero);
  color: var(--color-text-on-dark);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.static-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 60% at 50% 0%, rgba(176, 141, 87, 0.18), transparent 70%);
  z-index: -1;
}
.static-hero h1 { color: var(--color-text-on-dark); font-size: clamp(2rem, 4vw, 3rem); }
.static-hero p  { color: var(--color-text-on-dark-soft); max-width: 60ch; margin: var(--space-3) auto 0; }

.static-page { padding-block: clamp(2rem, 5vw, 4rem); }
.static-page .container { max-width: calc(980px + (var(--container-gutter) * 2)); }
.static-page h2 { font-size: var(--fs-xl); margin-block: var(--space-6) var(--space-3); }
.static-page h3 { font-size: var(--fs-md); margin-block: var(--space-5) var(--space-2); }
.static-page p, .static-page li { font-size: var(--fs-md); color: var(--color-text-soft); line-height: 1.8; }
.static-page ul { padding-left: 1.4rem; list-style: disc; }
.static-page a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.static-page a:hover { color: var(--color-accent); }
.static-page figure { margin: var(--space-6) 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.static-page figure img { width: 100%; height: auto; border-radius: 0; }
.static-page figure figcaption { padding: var(--space-3) var(--space-4); background: var(--color-bg-elev); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }

/* Legacy seeded company-page content now uses the same global container rhythm. */
.company-page-wrap { padding-block: clamp(2rem, 5vw, 4rem); }
.company-page-wrap h2 { font-size: var(--fs-xl); margin-block: var(--space-6) var(--space-3); }
.company-page-wrap h3 { font-size: var(--fs-md); margin-block: var(--space-4) var(--space-2); }
.company-page-wrap p,
.company-page-wrap li { font-size: var(--fs-md); color: var(--color-text-soft); line-height: 1.8; }
.company-page-wrap img { max-width: 100%; height: auto; }
.company-page-wrap a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.company-page-wrap a:hover { color: var(--color-accent); }
.company-page-wrap .company-hero {
  margin-block: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.company-page-wrap .company-hero img,
.company-page-wrap .company-wide-plain { width: 100%; border-radius: var(--radius-md); }
.company-page-wrap .company-gallery,
.company-page-wrap [class*="company-gallery"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-5);
}
.company-page-wrap .company-gallery figure,
.company-page-wrap [class*="company-gallery"] figure,
.company-page-wrap .company-gallery a,
.company-page-wrap [class*="company-gallery"] a {
  display: block;
  min-width: 0;
}
.company-page-wrap .company-gallery img,
.company-page-wrap [class*="company-gallery"] img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.company-page-wrap .company-stat-list {
  margin-block: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.company-page-wrap .company-feature-list { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.company-page-wrap .company-feature {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.company-page-wrap .company-feature img { width: 100%; border-radius: var(--radius-md); }
.company-page-wrap .company-about-intro,
.company-page-wrap .company-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
  margin-block: var(--space-5);
}
.company-page-wrap .company-about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.company-page-wrap .company-about-stat,
.company-page-wrap .company-profile-grid article {
  padding: var(--space-4);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.company-page-wrap .company-about-stat { text-align: center; }
.company-page-wrap .company-about-stat strong { display: block; font-size: 1.5rem; color: var(--color-accent-deep); }
.company-page-wrap .company-history-list { padding-left: 0; list-style: none; }
.company-page-wrap .company-history-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.company-page-wrap .company-history-list strong { color: var(--color-accent-deep); margin-right: var(--space-2); }
.company-page-wrap .company-contact-eyebrow { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-deep); }
.company-page-wrap .company-contact-title { font-size: var(--fs-xl); margin-block: var(--space-2) var(--space-4); color: var(--color-text); }
@media (max-width: 700px) {
  .company-page-wrap .company-feature,
  .company-page-wrap .company-about-intro,
  .company-page-wrap .company-profile-grid { grid-template-columns: 1fr; }
  .company-page-wrap .company-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two-up image + text sections (used on factories / strength). */
.media-section { padding-block: clamp(2rem, 5vw, 4rem); }
.media-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 900px) { .media-section__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.media-section__grid--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .media-section__grid--reverse > :first-child { order: 0; } }
.media-section__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.media-section__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-section__media:hover img { transform: scale(1.04); }

/* Contact page. */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); padding-block: var(--space-7); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.contact-card h2 { font-size: var(--fs-xl); }
.contact-card__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.contact-card__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-elev); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-accent-deep); }
.contact-card__label { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-card__value { font-size: var(--fs-md); color: var(--color-text); }
.contact-map { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-form { display: grid; gap: var(--space-3); }
.contact-form .field { display: flex; flex-direction: column; }

/* Cert / image wall. */
.cert-wall { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cert-wall img { width: 100%; height: auto; border-radius: var(--radius-md); transition: transform var(--duration-base) var(--ease-out); }
.cert-wall img:hover { transform: scale(1.04); }