/* =====================================================
   ARTICLE BLOCKS CSS
   Universal styling for block-based article content
   ===================================================== */

/* =====================
   Base Block Styles
===================== */

.article-block {
  margin-bottom: 1.75rem;
}

.article-block:last-child {
  margin-bottom: 0;
}

/* =====================================================
   CONTEXTUAL SPACING (Adjacent Sibling Selectors)
   Creates visual rhythm between different block types
   ===================================================== */

/* Heading directly after text/split/image = new section, more breathing room */
.article-text + .article-heading,
.article-split + .article-heading,
.article-image + .article-heading,
.article-table + .article-heading,
.article-callout + .article-heading,
.article-list + .article-heading,
.article-quote + .article-heading,
.article-legacy + .article-heading {
  margin-top: 3rem;
}

/* Text right after heading = tighter coupling */
.article-heading + .article-text,
.article-heading + .article-list {
  margin-top: 0.5rem;
}

/* Image after text or before text = editorial spacing */
.article-text + .article-image,
.article-text + .article-split {
  margin-top: 2.25rem;
}

.article-image + .article-text,
.article-split + .article-text {
  margin-top: 2.25rem;
}

/* Split after split = moderate gap */
.article-split + .article-split {
  margin-top: 2.5rem;
}

/* =====================
   TEXT BLOCK
===================== */

.article-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700);
}

.article-text p {
  margin-bottom: 1.125rem;
}

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

.article-text strong {
  font-weight: 700;
  color: var(--gray-900);
}

.article-text a {
  color: var(--primary-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms ease;
}

.article-text a:hover {
  color: var(--primary-dark);
}

.article-text ul,
.article-text ol {
  margin: 1.25rem 0;
  padding-left: 1.75rem;
}

.article-text li {
  margin-bottom: 0.625rem;
  padding-left: 0.25rem;
}

.article-text li::marker {
  color: var(--primary-blue);
}

/* =====================
   HEADING BLOCK
===================== */

.article-heading {
  font-family: 'Geologica', sans-serif;
  font-weight: 800;
  color: var(--primary-dark);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* H2: Major section header -- clean spacing, no hard border */
.article-heading--h2 {
  font-size: 1.75rem;
  padding-top: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* H3: Sub-section */
.article-heading--h3 {
  font-size: 1.375rem;
  font-weight: 700;
}

/* H4: Minor sub-section */
.article-heading--h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-800, var(--primary-dark));
}

/* First heading in article should not have extra top margin */
.article-block:first-child.article-heading {
  margin-top: 0;
  padding-top: 0;
}

/* =====================
   IMAGE BLOCK
===================== */

.article-image {
  margin: 2.5rem 0;
}

.article-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

/* When a ratio is set on image, let aspect-ratio take effect */
.article-image img[class*="img-ratio-"] {
  height: unset;
}

.article-image img:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.article-image figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-align: center;
  font-style: normal;
  letter-spacing: 0.01em;
}

.article-image figcaption::before {
  content: "-- ";
  opacity: 0.5;
}

.article-image figcaption::after {
  content: " --";
  opacity: 0.5;
}

/* Image Sizes */
.article-image--small {
  max-width: 300px;
}

.article-image--medium {
  max-width: 550px;
}

.article-image--full {
  max-width: 100%;
}

/* Full-width images break out of content container for editorial feel */
.article-image--full.article-image--center {
  margin-left: -2rem;
  margin-right: -2rem;
  max-width: calc(100% + 4rem);
}

/* Image Alignment */
.article-image--left {
  margin-right: auto;
}

.article-image--center {
  margin-left: auto;
  margin-right: auto;
}

.article-image--right {
  margin-left: auto;
}

/* =====================
   IMAGE RATIO & FIT
   Used by both image and split blocks
===================== */

/* Aspect Ratios */
.img-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.img-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.img-ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.img-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.img-ratio-21-9 {
  aspect-ratio: 21 / 9;
}

/* Fit Modes (only applied when a ratio is set) */
.img-fit-cover {
  object-fit: cover;
}

.img-fit-contain {
  object-fit: contain;
  background: var(--gray-50, #f8fafc);
}

/* =====================
   SPLIT BLOCK
===================== */

.article-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin: 2.5rem 0;
}

.article-split--align-center {
  align-items: center;
}

.article-split--align-end {
  align-items: end;
}

.article-split--text-left {
  grid-template-columns: 1fr 1fr;
}

.article-split--text-right {
  grid-template-columns: 1fr 1fr;
}

/* Ratio Variants */
.article-split--60-40 {
  grid-template-columns: 1.5fr 1fr;
}

.article-split--60-40.article-split--text-right {
  grid-template-columns: 1fr 1.5fr;
}

.article-split--40-60 {
  grid-template-columns: 1fr 1.5fr;
}

.article-split--40-60.article-split--text-right {
  grid-template-columns: 1.5fr 1fr;
}

.article-split__text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700);
}

.article-split__text p {
  margin-bottom: 1rem;
}

.article-split__text p:last-child {
  margin-bottom: 0;
}

.article-split__text strong {
  font-weight: 700;
  color: var(--gray-900);
}

.article-split__text ul,
.article-split__text ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.article-split__text li {
  margin-bottom: 0.5rem;
}

.article-split__text li::marker {
  color: var(--primary-blue);
}

.article-split__image {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.article-split__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

/* When a ratio is set on split image, respect it */
.article-split__image img[class*="img-ratio-"] {
  height: unset; /* override height: auto to let aspect-ratio take effect */
}

.article-split__image img:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .article-split {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  
  /* Image always comes first on mobile */
  .article-split__image {
    order: -1;
  }

  /* Full-bleed images reset on mobile */
  .article-image--full.article-image--center {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* =====================
   TABLE BLOCK
===================== */

.article-table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.article-table thead {
  background: var(--primary-dark);
  color: var(--white);
}

.article-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.article-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
  transition: background 150ms ease;
}

.article-table tbody tr:last-child td {
  border-bottom: none;
}

.article-table tbody tr:hover {
  background: rgba(0, 142, 201, 0.04);
}

.article-table--striped tbody tr:nth-child(even) {
  background: var(--gray-50);
}

.article-table--striped tbody tr:nth-child(even):hover {
  background: rgba(0, 142, 201, 0.06);
}

.article-table--compact th,
.article-table--compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* =====================
   BUTTON BLOCK
===================== */

.article-button {
  margin: 2rem 0;
}

.article-button--left {
  text-align: left;
}

.article-button--center {
  text-align: center;
}

.article-button--right {
  text-align: right;
}

.article-button .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.article-button .btn-icon {
  display: inline-flex;
  align-items: center;
}

.article-button .btn-icon svg {
  width: 1rem;
  height: 1rem;
}

/* =====================
   CALLOUT BLOCK
===================== */

.article-callout {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md, 8px);
  margin: 2rem 0;
}

.article-callout__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.625rem;
}

.article-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.article-callout__icon i {
  font-size: 1.25rem;
  line-height: 1;
}

.article-callout__content {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.article-callout__content p {
  margin: 0;
}

/* Callout Variants */
.article-callout--info {
  background: #e8f4fd;
  color: #1565c0;
}

.article-callout--info .article-callout__title {
  color: #1565c0;
}

.article-callout--info .article-callout__icon {
  background: none;
}

.article-callout--warning {
  background: #fff8e1;
  color: #e65100;
}

.article-callout--warning .article-callout__title {
  color: #e65100;
}

.article-callout--warning .article-callout__icon {
  background: none;
}

.article-callout--success {
  background: #e8f5e9;
  color: #2e7d32;
}

.article-callout--success .article-callout__title {
  color: #2e7d32;
}

.article-callout--success .article-callout__icon {
  background: none;
}

.article-callout--error {
  background: #ffebee;
  color: #c62828;
}

.article-callout--error .article-callout__title {
  color: #c62828;
}

.article-callout--error .article-callout__icon {
  background: none;
}

/* =====================
   VIDEO BLOCK
===================== */

.article-video {
  margin: 2.5rem 0;
}

.article-video__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.article-video__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.article-video figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-align: center;
}

/* =====================
   GALLERY BLOCK
===================== */

.article-gallery {
  display: grid;
  margin: 2.5rem 0;
}

.article-gallery--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.article-gallery--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.article-gallery--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.article-gallery--gap-small {
  gap: 0.5rem;
}

.article-gallery--gap-medium {
  gap: 1rem;
}

.article-gallery--gap-large {
  gap: 1.5rem;
}

.article-gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.article-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-subtle, #f5f5f5);
  border-radius: var(--radius-md, 8px);
  transition: transform 300ms ease;
}

.article-gallery__item img:hover {
  transform: scale(1.02);
}

.article-gallery__item figcaption {
  font-size: 0.75rem;
  color: var(--text-muted, #666);
  text-align: center;
  padding: 0.375rem 0.25rem 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .article-gallery--cols-3,
  .article-gallery--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .article-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* =====================
   SPACER BLOCK
===================== */

.article-spacer--small {
  height: 1rem;
}

.article-spacer--medium {
  height: 2rem;
}

.article-spacer--large {
  height: 3rem;
}

/* =====================
   DIVIDER BLOCK
===================== */

.article-divider {
  border: none;
  margin: 2.5rem 0;
}

.article-divider--line {
  border-top: 1px solid var(--gray-200);
}

.article-divider--dots {
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23cbd5e1'/%3E%3C/svg%3E") repeat-x center;
}

.article-divider--none {
  height: 0;
}

/* =====================
   QUOTE BLOCK
===================== */

.article-quote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  background: var(--gray-50);
  border-left: 4px solid var(--primary-blue);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

.article-quote p {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
}

.article-quote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--gray-600);
}

.article-quote cite::before {
  content: "-- ";
}

/* =====================
   LIST BLOCK
===================== */

.article-list {
  margin: 1.5rem 0;
  padding-left: 1.75rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700);
}

.article-list li {
  margin-bottom: 0.625rem;
  padding-left: 0.25rem;
}

.article-list li::marker {
  color: var(--primary-blue);
}

.article-list--ordered {
  list-style-type: decimal;
}

.article-list--unordered {
  list-style-type: disc;
}

/* =====================
   LEGACY HTML BLOCK
===================== */

.article-legacy {
  /* Inherits from article content styling */
}

/* =====================
   PRINT STYLES
===================== */

@media print {
  .article-block {
    page-break-inside: avoid;
  }
  
  .article-split {
    grid-template-columns: 1fr 1fr;
  }
  
  .article-video {
    display: none;
  }
  
  .article-callout {
    border: 1px solid currentColor;
    background: none !important;
  }

  .article-image img,
  .article-split__image img {
    box-shadow: none;
  }

  .article-image--full.article-image--center {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}