/*
 * Page styles of /egyedi-szoftverfejlesztes/: the <style> of egyedi-szoftverfejlesztes.astro as plain CSS. Every
 * selector starts with the page-software body class (plan §8.3); the Astro :global() rule became a page-scoped one.
 */

/* --- Head --- */
/* The soft hyphen of the title is only needed on the narrowest screens: measured, "szoftverfejlesztés" fits one line
   from 336px, safely from 22em. Above that the break is forced to the word boundary, otherwise text-wrap: balance
   would pick the more balanced, hyphenated variant (on desktop and on the usual phones too). */
@media (min-width: 22em) {
  .page-software .page-hero__text h1 {
    hyphens: none;
    -webkit-hyphens: none;
  }
}

/* Hairline panel + 4:3 crop; the drawing is composed to the right of the image, so the crop window moves right too,
   keeping the phone edge intact. */
.page-software .sw__hero-frame {
  border: 1px solid var(--c-ink-line);
  aspect-ratio: 4 / 3;
}

.page-software .sw__hero-frame img {
  object-position: 68% 50%;
}

/* --- Principles: three columns, hairline, short turquoise mark --- */
.page-software .sw__principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48em) {
  .page-software .sw__principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.page-software .sw__principle {
  position: relative;
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-5);
}

.page-software .sw__principle::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--c-turq);
}

.page-software .sw__principle h3 {
  font-size: var(--fs-3);
  margin-bottom: 0.45em;
}

/* In three columns the titles take 2 / 1 / 2 lines; a two-line minimum height starts the paragraphs on one line. */
@media (min-width: 48em) {
  .page-software .sw__principle h3 {
    min-height: calc(2 * var(--lh-snug) * 1em);
    min-height: 2lh;
  }
}

.page-software .sw__principle p {
  color: var(--c-text-2);
}

.page-software .sw__more {
  margin-top: var(--space-7);
}

/* --- Numbered steps: a real sequence, joined by a hairline --- */
.page-software .sw__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sw-step;
}

.page-software .sw__step {
  counter-increment: sw-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: var(--space-6);
}

/* On narrow screens (320px) the text column gets more room: a smaller gap and a one step smaller heading, so the
   long titles do not wrap to 3–4 lines. */
@media (min-width: 40em) {
  .page-software .sw__step {
    column-gap: var(--space-5);
  }
}

.page-software .sw__step:last-child {
  padding-bottom: 0;
}

.page-software .sw__step::before {
  content: counter(sw-step);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  font: 300 var(--fs-3) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-turq-700);
}

.page-software .sw__step::after {
  content: '';
  position: absolute;
  left: calc(1.375rem - 0.5px);
  top: 3.25rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--c-line);
}

.page-software .sw__step:last-child::after {
  display: none;
}

.page-software .sw__step h3 {
  grid-column: 2;
  font-size: var(--fs-2);
  margin: 0.5rem 0 0.4em;
}

@media (min-width: 40em) {
  .page-software .sw__step h3 {
    font-size: var(--fs-3);
    margin-top: 0.35rem;
  }
}

.page-software .sw__step p {
  grid-column: 2;
  color: var(--c-text-2);
}

/* --- Text columns of the split blocks --- */
.page-software .sw__text .lead {
  margin-bottom: var(--space-5);
}

.page-software .checklist + .sw__note {
  margin-top: var(--space-5);
}

.page-software .sw__sub + .sw__sub {
  margin-top: var(--space-6);
}

.page-software .sw__sub h3 {
  font-size: var(--fs-3);
  margin-bottom: 0.4em;
}

.page-software .sw__figure {
  align-self: center;
}

/* On the mist background the white illustrations must not sit like white boards: white × mist = mist, the colours of
   the drawing only darken a shade, so the three figures get the same treatment as in the white sections. */
.page-software .section--mist .sw__figure {
  background: transparent;
  border-radius: 0;
}

.page-software .section--mist .sw__figure img {
  mix-blend-mode: multiply;
}

/* The background of the sw-systems figure is not pure white (244–251 at the edges); after multiply it would show as a
   faint board. Brightening by 5% lifts it to white and barely touches the colours. The filter runs before blending. */
.page-software .sw__figure--lift img {
  filter: brightness(1.05);
}

/* Panorama figure and the stages of the chain: full width, a shared maximum width */
.page-software .sw__figure--wide {
  max-width: 60rem;
  margin-block: var(--space-7);
}

.page-software .sw__chain {
  max-width: 60rem;
}

.page-software .sw__chain + .sw__note {
  margin-top: var(--space-6);
}

/* --- Technology tags: hairline chips --- */
.page-software .sw__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
}

.page-software .sw__chip {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-text);
  font-size: var(--fs-1);
  line-height: 1.3;
  white-space: nowrap;
}

@media (min-width: 60em) {
  .page-software .sw__chips {
    padding-top: 0.35rem;
  }
}