/* ==========================================================================
   blocks/content-section/content-section.css
   Ponovljiv blok: H2 + tekst (+ slika)
   ========================================================================== */

.content-section {
  padding-block: var(--space-section);
}

.content-section + .content-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.content-section__body {
  display: grid;
  gap: 32px;
  align-items: start;
}

.content-section--with-image .content-section__body {
  grid-template-columns: 1fr;
}

/* Brez tega grid elementi privzeto ne morejo biti ožji od svoje najširše
   vsebine (min-width:auto) — tabela (data-table) v .content-section__text
   bi zato razširila celoten stolpec in vso stran čez rob zaslona na mobilnem,
   namesto da bi se vodoravno drsala samo znotraj .data-table-wrap. */
.content-section__media,
.content-section__text {
  min-width: 0;
}

.content-section__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.content-section__intro {
  margin-bottom: var(--space-paragraph);
}

/* Kontekstualne povezave znotraj besedila (interno povezovanje med stranmi)
   morajo vizualno izstopati od navadnega besedila, ne pa se zlivati z
   --color-text-main. Uporabimo isti toplo-oranžni odtenek kot pri CTA
   gumbih, s podčrto za jasno dostopnost, hover pa preide na zlato barvo
   naslovov za dosleden brand občutek. */
.content-section__intro a,
.content-section__text a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(255, 179, 117, 0.45);
  text-underline-offset: 3px;
  font-weight: var(--font-weight-medium);
}

.content-section__intro a:hover,
.content-section__text a:hover {
  color: var(--color-heading-gold);
  text-decoration-color: currentColor;
}

.content-section__text h3 {
  margin-top: var(--space-paragraph);
}

.content-section__text h3:first-child {
  margin-top: 0;
}

/* css/reset.css postavi "list-style: none" globalno (za nav/footer/toc sezname).
   Tukaj vrnemo pikice/številke samo za dejanske vsebinske sezname v besedilu
   (uvod + telo vsakega content-section bloka), da so alineje spet vidne. */
.content-section__text ul,
.content-section__text ol {
  margin: var(--space-paragraph) 0;
  padding-left: 1.3em;
}

.content-section__text ul {
  list-style: disc outside;
}

.content-section__text ol {
  list-style: decimal outside;
}

.content-section__text li {
  margin-bottom: 8px;
}

.content-section__text li:last-child {
  margin-bottom: 0;
}

.content-section__text li::marker {
  color: var(--color-heading-gold);
}

.content-section__text ul ul,
.content-section__text ol ol,
.content-section__text ul ol,
.content-section__text ol ul {
  margin-top: 8px;
}

.content-section__block + .content-section__block {
  margin-top: var(--space-section);
}

.content-section__cta {
  margin-top: var(--space-paragraph);
  text-align: center;
}

/* Slika je VEDNO nad besedilom in čez celo širino besedilnega bloka
   (eno-stolpčna postavitev na vseh širinah zaslona, brez obrezovanja slike). */

/* Blok Android/iOS (2 stolpca) na straneh Aplikacija in Domov */
.app-platforms {
  margin-top: var(--space-paragraph);
  gap: 20px;
}

.app-platforms__card h3 {
  margin-top: 0;
}

.app-platforms__card .data-table {
  margin-block: var(--space-paragraph);
}

.app-platforms__card .btn {
  margin-top: var(--space-paragraph);
}

/* Uporablja se, ko content-section__text sledi drugemu bloku (npr. games-slider) znotraj iste sekcije */
.content-section__text--spaced {
  margin-top: var(--space-paragraph);
}