/* --------------------------------------------
   Nexcurity – Article Layout (clean version)
   File: article-style.css
   Depends on variables in style.css (colors/spacing/typography)
   ---------------------------------------------*/

/* Wrapper: keep content aligned with site width */
.article {
  width: min(80%, 1300px);
  margin-inline: auto;
  margin-block: var(--space-2);
  overflow-x: hidden; /* safety net against horizontal scroll */
}

/* Card container that holds all blocks */
.article__card {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-1) 0;
  padding: clamp(var(--space-2), 2.5vw, var(--space-4));
  border: 1px groove var(--c-accent);
  background: var(--c-bg-weak);
  border-radius: var(--r-md);
  width: 100%;
  max-width: 100%;
}

/* Hardening: keep everything measured in the box and wrap long tokens */
.article__card,
.article__card * {
  box-sizing: border-box;
}
.article__card h1,
.article__card h2,
.article__card h3,
.article__card p {
  max-width: 100%;
  width: auto;
  overflow-wrap: anywhere; /* breaks long words/URLs */
  word-break: normal;
  margin-left: 0;
  margin-right: 0;
}

/* Reset heading flex coming from global styles: headings in article are not flex */
.article h1,
.article h2,
.article h3 {
  display: block;
  justify-content: unset;
  align-items: unset;
}

/* Headline blocks & alignment */
.article__block--h1 h1 {
  color: var(--c-accent);
  margin: var(--space-2) 0;
  text-align: center; /* keep H1 centered */
}

.article__block--h2 h2 {
  color: var(--c-ink);
  margin: var(--space-1) 0;   /* readability */
  text-align: left;         /* keep H2 left-aligned */
}

.article__block--h3 h3 {
  color: var(--c-ink);
  margin: var(--space-1) 0;   /* a bit tighter than H2 */
  text-align: left;           /* H3 left-aligned */
}

/* Generic block wrapper */
.article__block {
  display: block;
}

/* Full-width paragraph blocks */
.article__block--full p {
  margin: var(--space-1) 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ---------- Two-column variants ---------- */

/* Variant 1: both columns left-aligned (P | P) */
.article__block--two-col-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.article__block--two-col-left > p {
  margin: 0;
  text-align: left;
}

/* Variant 2: left-left & right-right (P | P right) */
.article__block--two-col-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.article__block--two-col-split > p {
  margin: 0;
}
.article__block--two-col-split > p:first-child {
  text-align: left;
}
.article__block--two-col-split > p:last-child {
  text-align: right;
}

/* Variant 3: left-left & right slightly inset (P | P right padded) */
.article__block--two-col-split-centered {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.article__block--two-col-split-centered > p {
  margin: 0;
}
.article__block--two-col-split-centered > p:first-child {
  text-align: left;
}
.article__block--two-col-split-centered > p:last-child {
  text-align: right;
  padding-right: var(--space-4); /* visually inset from the edge */
}

/* Text with media to the right (P | IMG) */
.article__block--two-col-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: center; /* vertical alignment of text against image */
}
.article__block--two-col-media > p {
  margin: 0;           /* no extra margins inside grid cells */
}

/* Two images side-by-side (IMG | IMG) */
.article__block--gallery-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

/* Responsive upgrades */
@media (min-width: 760px) {
  .article__block--two-col-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .article__block--two-col-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .article__block--two-col-split-centered {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .article__block--two-col-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .article__block--gallery-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Media / images / figure & caption ---------- */

/* Use <figure class="media"> for image blocks within article */
.article .media {
  margin: 0;
  display: flex;              /* center image inside the cell */
  justify-content: center;
}

/* Article images: centered and capped (never overflow the card) */
.article .media > img {
  width: auto;                       /* keep natural width */
  max-width: min(90%, 800px);        /* never wider than the column; cap on large screens */
  height: auto;                      /* never stretch by height */
  max-height: 500px;
  border-radius: var(--r-xs);
  display: block;
}

/* Utility: make a media image fill its column more */
.article .media--wide img { max-width: 98%; }

/* Ensure <figure>/<figcaption> behave classically (caption below image) */
.article figure {
  display: block;
  text-align: center;                /* center caption text */
  margin: var(--space-1) 0;
}
.article figure img {
  display: block;
  margin: 0 auto;
}
.article figure figcaption {
  display: block;                    /* no flex here */
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-weak);
  text-align: center;
}

/* ---------- Lists inside article ---------- */

/* Classic outside bullets with consistent indent */
.article ul {
  list-style: disc outside;
  margin: var(--space-0) 0;
  padding-left: var(--space-3); /* indent for bullets */
}
.article li {
  display: list-item;               /* override any global inline-block li */
  margin: var(--space-1) 0;
  line-height: 1.6;
}
/* Nested lists */
.article li ul {
  list-style: circle;
  margin-top: var(--space-1);
  padding-left: var(--space-3);
}

/* ---------- Optional subtle separators between blocks ---------- */
.article__block + .article__block {
  padding-top: var(--space-2);
}  

/* ---------- Utilities ---------- */
.u-pad-top    { padding-top: var(--space-3); }
.u-pad-bottom { padding-bottom: var(--space-3); }

/* Responsive image caps: roomy on large screens, generous on small */
.article figure.media img {
  /* base: phones */
  max-width: min(98%, 680px);
}



/* Force <figcaption> to be directly below its image in all cases */
.article figure.media {
  /* make figure a tiny 1-column grid: row1 = img, row2 = caption */
  display: grid !important;        /* override any flex/inline rules */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;           /* center both image and caption */
  margin: var(--space-1) 0;
}

.article figure.media img {
  grid-row: 1;                     /* image on first row */
  justify-self: center;
  display: block;
  margin: 0;                       /* avoid inline gaps */
  float: none !important;          /* neutralize stray floats */
}

.article figure.media figcaption {
  /* scales ~12px → 14px across common widths */
  font-size: clamp(0.75rem, 0.6rem + 0.4vw, 0.875rem);
  line-height: 1.35;
  grid-row: 2;                     /* caption on second row */
  display: block !important;       /* neutralize flex/inline overrides */
  float: none !important;
  margin-top: var(--space-1);
  text-align: center;
  width: 100%;                     /* full line for safer wrapping */
  font-size: var(--fs-sm);
  color: var(--c-ink-weak);
}