/**
 * Text and Image Block Styles
 *
 * Styles for the text-and-image ACF block
 * Based on the EverSmith HTML design - styles from text-image-block-variations.html
 */

/* CSS Variables (matching the HTML page) */
.text-image-block {
  --smith-grey: #404a50;
  --orange: #e57440;
  --btn-primary-rest: #e57440;
  --btn-primary-hover: #f26828;
  --btn-primary-pressed: #c87400;
  --text-regular: 16px;
  --text-medium: 18px;
  --transition-fast: 0.2s ease;

  /* Block base styles */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Element: Header section (label, title, subtitle)
   ========================================================================== */

.text-image-block__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  padding: 48px 80px 0;
  text-align: center;
}

/* ==========================================================================
   Home Section Label (from HTML page)
   ========================================================================== */

.home-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.home-section-label span {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #0097a7;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Label crown: theme .es-icon-titles */

/* Modifier .home-section-label--stacked: column layout at max-width 1024px below */

/* Header h2 / subtitle: theme .es-section-title and .es-section-subtitle */

/* ==========================================================================
   Element: Body container (two-column layout)
   ========================================================================== */

.text-image-block__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  width: 100%;
  max-width: 1440px;
  padding: 60px 80px 100px;
  position: relative;
}

/* ==========================================================================
   Element: Media column (images)
   ========================================================================== */

.text-image-block__media {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.text-image-block__media img,
.text-image-block__media-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Element: Content column (text)
   ========================================================================== */

.text-image-block__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.text-image-block__content p {
  margin: 0 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--text-regular);
  line-height: 1.5;
  color: var(--smith-grey);
}

.text-image-block__content p:last-child {
  margin-bottom: 0;
}

/* Lists in content */
.text-image-block__content ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 16px 0;
}

.text-image-block__content ul li {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--text-regular);
  line-height: 1.5;
  color: var(--smith-grey);
  margin-bottom: 8px;
}

.text-image-block__content ul li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   CTA Button - from HTML page
   ========================================================================== */

.home-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px 32px;
  border-radius: 8px;
  background: var(--btn-primary-rest);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-top: 16px;
}

.home-cta-btn:hover {
  background-color: var(--btn-primary-hover);
  box-shadow: 0px 6px 14px rgba(1, 13, 20, 0.1);
}

.home-cta-btn:active {
  background-color: var(--btn-primary-pressed);
  box-shadow: none;
}

.home-cta-btn:focus-visible {
  outline: 2px solid var(--btn-primary-pressed);
  outline-offset: 2px;
}

/* ==========================================================================
   Modifiers: Media positioning
   ========================================================================== */

/* Modifier: Media on left (default behavior from home-about) */
.text-image-block--media-left .text-image-block__media {
  width: 615px;
}

/* Modifier: Media on right (from home-national) */
.text-image-block--media-right .text-image-block__body {
  flex-direction: row-reverse;
}

.text-image-block--media-right .text-image-block__media {
  width: 45%;
  max-width: 580px;
}

/* Extra spacing when subtitle follows the title */
.text-image-block--has-subtitle .text-image-block__header .es-section-title {
  margin: 16px 0;
}

/* Modifier: Section with white background and padding (home-national style) */
.text-image-block--padded {
  gap: 72px;
  padding: 100px 80px 80px;
  background: #fff;
}

.text-image-block--padded .text-image-block__header {
  padding: 0;
}

.text-image-block--padded .text-image-block__body {
  max-width: 1280px;
  padding: 0;
}

/* ==========================================================================
   Responsive Styles - Tablet (1024px and below)
   ========================================================================== */

@media (max-width: 1024px) {
  .text-image-block__header {
    padding: 48px 32px 0;
  }

  .text-image-block__body {
    flex-direction: column;
    padding: 40px 32px 60px;
    gap: 40px;
  }

  .text-image-block--media-left .text-image-block__media,
  .text-image-block--media-right .text-image-block__media {
    width: 100%;
    max-width: 500px;
  }

  /* Force column layout on tablet for media-right sections (override desktop row-reverse) */
  .text-image-block--media-right .text-image-block__body {
    flex-direction: column;
  }

  /* Reverse order for media-left sections so text appears before image on tablet */
  .text-image-block--media-left .text-image-block__body {
    flex-direction: column-reverse;
  }

  /* Padded modifier: reduced spacing for tablet to match non-padded sections */
  .text-image-block--padded {
    padding: 48px 32px 0;
    gap: 24px;
  }

  .text-image-block--padded .text-image-block__body {
    gap: 32px;
    padding: 24px 0 60px;
  }

  /* Tablet: keep horizontal but allow wrapping */
  .home-section-label {
    flex-direction: row;
    gap: 8px;
  }

  /* Stack crown above text on tablet (matches global style.css breakpoint) */
  .home-section-label--stacked {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
   Responsive Styles - Mobile (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
  .text-image-block__header {
    padding: 32px 20px 0;
  }

  .text-image-block__body {
    padding: 32px 20px 48px;
  }

  .text-image-block--media-left .text-image-block__media,
  .text-image-block--media-right .text-image-block__media {
    width: 100%;
    max-width: 100%;
  }

  /* Force column layout on mobile for media-right sections (override desktop row-reverse) */
  .text-image-block--media-right .text-image-block__body {
    flex-direction: column;
  }

  /* Reverse order for media-left sections so text appears before image on mobile */
  .text-image-block--media-left .text-image-block__body {
    flex-direction: column-reverse;
  }

  /* Padded modifier: reduced spacing for mobile to match non-padded sections */
  .text-image-block--padded {
    padding: 32px 20px 0;
    gap: 16px;
  }

  .text-image-block--padded .text-image-block__body {
    gap: 24px;
    padding: 16px 0 48px;
  }

  .text-image-block__content ul li {
    font-size: 16px;
  }

  .home-cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* On mobile, keep default row; --stacked handled at max-width 1024px */
  .home-section-label {
    flex-direction: row;
    gap: 8px;
  }
}

/* ==========================================================================
   Responsive Styles - Small Mobile (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
  .home-section-label span {
    font-size: 14px;
  }

  .text-image-block__content p {
    font-size: 15px;
  }
}