/* Page layouts of operandor.io. Tokens, components and site chrome come from
   the design system stylesheet, which is linked before this file. */

.op-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:64px;align-items:center}
/* The two calls to action share a line and grow alike from their own width; a label never breaks, and the
   second button moves below the first when the line is too short for both. */
.op-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;max-width:520px}
.op-hero-actions > *{flex:1 1 auto;white-space:nowrap}
.op-hero-panel{position:relative;border-radius:var(--radius-4);overflow:hidden;background:var(--n-950);min-height:420px;display:flex;align-items:flex-end;padding:28px}
/* Decision: the row is a size container, and its figures' values, lines and gaps scale with its width, at most the
   design's 32px; a figure's line wraps under its value.
   Why: three figures stay on one line at every width, from a phone to the hero's half of a wide screen, in
   every language; the longest values ("i postojeći", "existing too") decide the scale.
   Considered: wrapping to a second row, which broke the row on laptops and phones; a smaller fixed size, which
   lost the figures' weight on wide screens. */
.op-hero-stats{display:flex;gap:24px 4%;margin-top:48px;padding-top:32px;border-top:1px solid var(--border-subtle);flex-wrap:wrap;container-type:inline-size}
.op-hero-stats .op-stat__value{font-size:clamp(16px,4.6cqi,32px)}
.op-hero-stats .op-stat__hint{max-width:min(20ch,26cqi)}
.op-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.op-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* The dark band of numbered steps (StepsBand): the heading, 16px under the eyebrow where the page has one, and the
   line under it; the steps a list without markers of its own, two to a row, each with its number, title and text.
   The band's look is set here once for the three pages that show it, not in style attributes. */
.op-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;list-style:none;margin:0;padding:0}
.op-steps-band__heading{margin:0;font-family:var(--font-heading);font-weight:600;font-size:30px;line-height:1.14;letter-spacing:-0.014em;color:var(--n-50)}
.op-eyebrow + .op-steps-band__heading{margin-top:16px}
.op-steps-band__lead{margin:16px 0 0;max-width:44ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,0.78)}
.op-steps-band__number{font-family:var(--font-mono);font-size:12px;color:var(--green-400)}
.op-steps-band__title{margin:8px 0 0;font-weight:600;font-size:15px;color:var(--n-50)}
.op-steps-band__body{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.6)}
/* The pilot's text keeps a margin inside the patterned area of its dark band. */
.op-pilot-grid{padding:24px 48px}
/* The case study layout (the case studies and the senior capacity page): the heading beside its fact sheet, the
   description beside its call to action. */
.op-case-hero{display:grid;grid-template-columns:1fr 320px;gap:64px;margin-top:24px}
.op-case-body{display:grid;grid-template-columns:1fr 300px;gap:64px}
/* A section heading of a longer description, with room above it to set the sections apart. */
.op-case-body__heading{font-family:var(--font-heading);font-weight:600;font-size:24px;line-height:1.25;letter-spacing:-0.014em;color:var(--text-heading);margin:40px 0 14px}
.op-case-body__heading:first-child{margin-top:0}
/* The note under a case study's lead: when and with whom the work was done, set apart from the lead. */
.op-case-note{margin-top:20px;max-width:60ch}
/* A product screenshot in a frame, so its white page stands apart from the band in either theme. */
.op-product-shot{margin:0}
.op-product-shot img{display:block;width:100%;height:auto;border:1px solid var(--border-default);border-radius:var(--radius-4);box-shadow:var(--shadow-raised);background:#fff}
.op-product-shot figcaption{font-size:13px;line-height:1.6;color:var(--text-muted);margin-top:14px}
/* Cropped details under the large screenshot, three in a row, one under the other on narrow screens. */
.op-product-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.op-product-shots > *{min-width:0}
/* The featured product on the products page: its text beside a screenshot. */
.op-product-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.op-product-card__grid > *{min-width:0}
/* The not-found page: a drawing, the number and every language's home page, centred. */
.op-notfound{display:flex;flex-direction:column;align-items:center;text-align:center}
.op-notfound__drawing{width:min(100%,560px);height:auto}
.op-notfound__number{font-family:var(--font-mono);font-weight:500;font-size:clamp(4.5rem,3rem + 6vw,8rem);line-height:1;letter-spacing:-0.04em;color:var(--text-heading);margin:28px 0 0}
.op-notfound__languages{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
/* The about page's team: a box per person, two in a row like the home page's cards, one under the other on
   phones. */
.op-team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
/* The about page's points of how the team works, side by side over its calls to action, one under the other
   below the tablet width. */
.op-about-ways{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.op-about-ways > *{min-width:0}
.op-about-actions{margin-top:48px}
/* The work page's earlier projects: two in a row, so an even number of cards fills every row. */
.op-work-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* The work page's note under the lead, that the projects come from before operandor. */
.op-work-note{margin-top:24px;max-width:64ch}
/* A work card's sector and its mark of earlier experience, side by side, one under the other when they do not fit. */
.op-work-card__badges{display:flex;flex-wrap:wrap;gap:8px}
/* A person's role or the part taken in a project, under a card's title.
   Decision: the body face at 14px in the muted text colour, medium weight.
   Why: the mono 12px line in the subtle colour was hard to read and fell under AA contrast on white; the muted
   colour passes AA in both themes, and the weight keeps it apart from the text under it.
   Considered: the mono face at a larger size, which still reads as code rather than as a role. */
.op-role{font-family:var(--font-body);font-size:14px;line-height:1.5;font-weight:var(--fw-medium);color:var(--text-muted);margin-top:6px}
/* The short line on a home page reference that the developers worked on it together. */
.op-home-reference__note{font-size:14px;line-height:1.5;color:var(--text-body);margin:10px 0 0}
/* A card's cue sits at its foot, under texts of any length. */
.op-card-foot{margin-top:auto;padding-top:20px}

/* A section or a service a link leads to stops below the sticky header instead of under it. */
.op-band[id],.op-card[id],.op-card [id]{scroll-margin-top:88px}

@media (max-width:960px){
  .op-hero-grid,.op-work-grid,.op-case-hero,.op-case-body,.op-about-ways{grid-template-columns:1fr;gap:40px}
  .op-pilot-grid{padding:16px 32px}
  .op-services-grid{grid-template-columns:repeat(2,1fr)}
  .op-product-shots,.op-product-card__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .op-hero-actions{max-width:100%}
  /* Decision: full-width hero buttons may wrap their label onto a second line, and then grow to fit it.
     Why: the Croatian and Serbian "try it on your own documents" label is wider than a 320px screen, so the page
     scrolled sideways; a single-line label keeps the button's 48px height.
     Considered: a shorter label, which only moves the limit to the next long translation. */
  .op-hero-actions > *{flex-basis:100%;white-space:normal;height:auto;min-height:48px;padding-block:8px;text-align:center}
  .op-services-grid{grid-template-columns:1fr}
  .op-steps-grid,.op-team-grid,.op-work-cards{grid-template-columns:1fr}
  .op-pilot-grid{padding:8px 16px}
}

/* Allow grid content to shrink on narrow screens. */
.op-hero-grid > *,.op-services-grid > *,.op-team-grid > *,.op-work-cards > *{min-width:0}
@media (max-width:640px){
  .op-hero-panel{min-height:320px;padding:24px}
}

/* The home page: the caption under the hero's drawing, the rovatix band's points and the note under how we work;
   the steps under the paper-to-data panel (PaperToDataPanel) of the rovatix band and the rovatix page. The caption
   and the steps share one look, so the page's two drawings read as one family. */
.op-hero-panel__caption{margin:16px 0 0;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--text-muted)}
.op-home-rovatix__points{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.op-home-rovatix__points li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--text-body)}
.op-paper-panel__flow{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.op-paper-panel__flow li + li::before{content:"\2192";margin-right:8px;color:var(--accent)}
.op-home-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.14)}
.op-home-note p{margin:0;max-width:64ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,0.78)}
/* A service's page ends with the related solution beside the call to action, one under the other on phones. */
.op-service-detail__close{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}

/* The AI-assisted workflow automation page: the four example tasks two in a row, and the three short answers on
   measurement, control and simpler solutions side by side. */
.op-ai-tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.op-ai-tasks > *{min-width:0}
.op-ai-points{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
.op-ai-points > *{min-width:0}
@media (max-width:960px){
  .op-ai-points{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .op-ai-tasks{grid-template-columns:1fr}
}

/* The rovatix page: the pilot's steps as a numbered list beside its text, and the questions in two columns. */
.op-rovatix-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.op-rovatix-steps > li{padding-left:20px;border-left:1px solid var(--border-subtle)}
.op-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 56px;margin-top:36px}
.op-faq > *{min-width:0}
@media (max-width:640px){
  .op-faq{grid-template-columns:1fr;gap:28px}
}

/* Decision: in the wide header, this site's menu links stand 20px apart and the row's parts 32px, where the design
   system sets 28px and 40px.
   Why: the menu has six links since the blog. The header's content is never wider than 1080px (the container less
   its gutters), and in Hungarian, the longest row, the links, the language menu and the long call to action need
   about 1130px at the design system's spacing, 1095px even with the short label: the button ran past the row's
   edge at every width. At this spacing the same row needs about 1065px, so every language fits from the width
   the links come back at (1181px), with the long label from 1201px as before.
   Considered: folding the menu on wider screens, which no width satisfies, since the content stops growing; the
   short label only, which gives up the invitation on desktop; the menu without its home link, which the logo
   repeats but visitors look for; tighter spacing in the design system itself, whose other sites have shorter menus. */
@media (min-width:1181px){
  .op-header__inner{gap:32px}
  .op-header__nav{gap:20px;margin-left:0}
}

/* The header's call to action shows its long label on wide screens and its short one where the menu
   and the language menu leave it less room (MainLayout).
   Decision: the long label starts at 1201px, 20px above the width where the links fold into the menu button.
   Why: beside the Hungarian links the long label needs about 1200px, the header's full width; below that a link
   broke into two lines.
   Considered: the long label from 1181px, where the links come back, which pushed the button out of line. */
.op-cta-short{display:none}
@media (max-width:1200px){
  .op-cta-long{display:none}
  .op-cta-short{display:inline}
}