/* 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}
.op-hero-stats{display:flex;gap:48px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.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}
.op-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
/* The pilot's text keeps a margin inside the patterned area of its dark band. */
.op-pilot-grid{padding:24px 48px}
.op-stack-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center}
/* The call to action card fills the rest of the last row of three (--cta-span, set by HomeSituations). */
.op-services-grid > .op-card--structural{grid-column:span var(--cta-span,1)}
/* The products page keeps the layout of the earlier case study page: the name 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 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-subtle);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}
/* Another product: its text, and on the right the invitation to ask about it. */
.op-product-other{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}
.op-notfound-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:20px}
/* A services page row: icon, text and points, and how the service starts in the right column. */
.op-service-row{display:grid;grid-template-columns:48px 1fr 260px;gap:28px;align-items:start}
.op-service-row__engage,.op-product-other__engage{border-left:1px solid var(--border-subtle);padding-left:24px}

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

@media (max-width:960px){
  .op-hero-grid,.op-work-grid,.op-stack-grid,.op-notfound-grid,.op-case-hero,.op-case-body{grid-template-columns:1fr;gap:40px}
  .op-pilot-grid{padding:16px 32px}
  .op-services-grid > .op-card--structural{grid-column:1 / -1}
  .op-services-grid{grid-template-columns:repeat(2,1fr)}
  .op-service-row,.op-product-other,.op-product-shots{grid-template-columns:1fr}
  .op-service-row__engage,.op-product-other__engage{border-left:0;padding-left:0;border-top:1px solid var(--border-subtle);padding-top:16px}
}
@media (max-width:640px){
  .op-hero-actions{max-width:100%}
  .op-hero-actions > *{flex-basis:100%}
  .op-services-grid{grid-template-columns:1fr}
  .op-steps-grid{grid-template-columns:1fr}
  .op-hero-stats{gap:24px}
  .op-pilot-grid{padding:8px 16px}
}

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