/* ==========================================================
   02-components.css
   Reusable, brand-agnostic components for ACF + templates
   Uses CSS variables from 00-settings.css when available
   ========================================================== */

/* ------------------------------
   Layout helpers
------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad, 20px);
  padding-right: var(--container-pad, 20px);
}

.section {
  padding-top: var(--section-pad-y, 60px);
  padding-bottom: var(--section-pad-y, 60px);
}

.section--tight {
  padding-top: var(--section-pad-y-tight, 30px);
  padding-bottom: var(--section-pad-y-tight, 30px);
}

.stack > * + * {
  margin-top: var(--stack-gap, 16px);
}

/* ------------------------------
   Buttons
------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--btn-pad-y, 12px) var(--btn-pad-x, 18px);
  border-radius: var(--btn-radius, 8px);
  border: 1px solid var(--btn-border, rgba(0, 0, 0, 0.15));
  background: var(--btn-bg, #111);
  color: var(--btn-color, #fff);
  font-weight: var(--btn-weight, 600);
  line-height: 1;
  text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}

.btn:hover,
.btn:focus {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

.btn--outline {
  background: transparent;
  color: var(--btn-outline-color, #111);
  border-color: var(--btn-outline-border, rgba(0, 0, 0, 0.25));
}

.btn--light {
  background: var(--btn-light-bg, #fff);
  color: var(--btn-light-color, #111);
  border-color: var(--btn-light-border, rgba(0, 0, 0, 0.15));
}

.btn--sm {
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.95rem;
}

.btn--lg {
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 1.05rem;
}

/* ------------------------------
   Headings and text utilities
------------------------------ */
.kicker {
  font-size: var(--kicker-size, 0.9rem);
  letter-spacing: var(--kicker-tracking, 0.08em);
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 0.6em;
}

.lead {
  font-size: var(--lead-size, 1.1rem);
  line-height: 1.7;
  opacity: 0.9;
}

.small {
  font-size: 0.92rem;
  opacity: 0.85;
}

/* ------------------------------
   Cards
------------------------------ */
.card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--card-radius, 14px);
  padding: var(--card-pad, 22px);
  box-shadow: var(--card-shadow, 0 6px 24px rgba(0, 0, 0, 0.06));
}

.card--flat {
  box-shadow: none;
}

.card__title {
  margin: 0 0 0.5em;
}

.card__meta {
  font-size: 0.92rem;
  opacity: 0.8;
}

/* ------------------------------
   Dividers
------------------------------ */
.hr {
  border: 0;
  border-top: 1px solid var(--hr-color, rgba(0, 0, 0, 0.12));
  margin: var(--hr-margin, 30px) 0;
}

/* ------------------------------
   Grids
------------------------------ */
.grid {
  display: grid;
  gap: var(--grid-gap, 22px);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   Media blocks
------------------------------ */
.media {
  border-radius: var(--media-radius, 14px);
  overflow: hidden;
  background: var(--media-bg, #f3f3f3);
}

.media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------
   ACF Flexible Content wrappers
   Use these on your block outer divs
------------------------------ */
.acf-block {
  padding-top: var(--block-pad-y, 60px);
  padding-bottom: var(--block-pad-y, 60px);
}

.acf-block--tight {
  padding-top: var(--block-pad-y-tight, 30px);
  padding-bottom: var(--block-pad-y-tight, 30px);
}

.acf-block__inner {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad, 20px);
  padding-right: var(--container-pad, 20px);
}

/* ------------------------------
   Basic CTA strip
------------------------------ */
.cta {
  border-radius: var(--cta-radius, 16px);
  padding: var(--cta-pad, 28px);
  background: var(--cta-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--cta-border, rgba(0, 0, 0, 0.10));
}

.cta__title {
  margin: 0 0 0.4em;
}

.cta__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------------
   Form baseline wrapper
   Helpful for CF7 and Gravity Forms
------------------------------ */
.form {
  display: grid;
  gap: 14px;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form textarea,
.form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--input-radius, 10px);
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.18));
  background: var(--input-bg, #fff);
  color: var(--input-color, #111);
  outline: none;
}

.form textarea {
  min-height: 140px;
  resize: vertical;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--input-border-focus, rgba(0, 0, 0, 0.35));
}

/* ------------------------------
   Accessibility focus ring
------------------------------ */
:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(0, 0, 0, 0.35));
  outline-offset: 3px;
}