/* ============================================================
   PAGE-SPECIFIC — om-oss.html
   New classes only. Nothing above this line is modified.
   Mobile-first: base rules are the 375px layout.
   ============================================================ */

/* ---------- A. interior hero (about half the homepage hero) ---------- */
.hero-om{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + var(--s4));
  padding-bottom:var(--s4);
}
@media (min-width:980px){
  .hero-om{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s5)}
}
.hero-om-grid{display:grid;gap:var(--s4)}
@media (min-width:980px){
  .hero-om-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--s6);align-items:center}
}
.display-sm{
  font-size:clamp(34px,8vw,64px);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;text-wrap:balance;
}
.hero-om .lead{margin-top:var(--s3);color:rgba(251,247,242,.78)}
.hero-om-figs{display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.hero-om-figs img{
  width:32%;max-width:140px;height:auto;
  filter:drop-shadow(0 18px 30px rgba(14,16,38,.66));
}
.hero-om-figs img:nth-child(1),
.hero-om-figs img:nth-child(3){transform:translateY(16px)}
@media (min-width:980px){ .hero-om-figs img{max-width:172px} }
.hero-om-cap{
  margin-top:var(--s3);text-align:center;letter-spacing:.02em;
  font-size:var(--t-small);color:rgba(251,247,242,.78);
}

/* ---------- C. how we work — asymmetric 12-col staircase ---------- */
.craft-head{display:grid;gap:var(--s3);align-items:end}
@media (min-width:980px){ .craft-head{grid-template-columns:minmax(0,1fr) auto;gap:var(--s5)} }
.craft-deco{display:none}
@media (min-width:980px){
  .craft-deco{display:block;justify-self:end;width:210px}
  .craft-deco img{width:100%;height:auto;filter:drop-shadow(0 20px 34px rgba(14,16,38,.66))}
}
.craft{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:880px){
  .craft{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .craft-item:nth-child(1){grid-column:1 / span 5}
  .craft-item:nth-child(2){grid-column:7 / span 5;margin-top:var(--s5)}
  .craft-item:nth-child(3){grid-column:2 / span 5}
  .craft-item:nth-child(4){grid-column:8 / span 5;margin-top:var(--s4)}
}
.craft-item{padding-top:var(--s3);border-top:1px solid var(--c-line)}
.on-dark .craft-item{border-top-color:var(--c-line-dark)}
.craft-n{
  display:block;margin-bottom:var(--s2);
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;color:var(--c-accent-ink);
}
.on-dark .craft-n{color:var(--c-accent)}
.craft-item h3{margin-bottom:10px}
.craft-item p{max-width:42ch;color:inherit}
.craft-note{margin-top:var(--s5);max-width:56ch}
.text-link{color:var(--c-accent);font-weight:600;text-underline-offset:4px}
.text-link:hover{color:#FFFFFF}

/* ---------- C2. the chefs ----------
   White band between the dark craft section and the paper restaurant list.
   The head chef gets a wide card (portrait beside the text); the two sushi
   chefs sit side by side under him. All portraits are the same 4:5 crop. */
.chefs-band{background:#FFFFFF;border-block:1px solid var(--c-line)}
.chefs{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:760px){ .chefs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)} }
.chef{display:grid;gap:var(--s3);align-content:start}
.chef-fig{margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--c-bg);box-shadow:var(--sh-2)}
.chef-fig img{width:100%;height:100%;object-fit:cover}
.chef-body{display:grid;gap:12px}
.chef-body p{max-width:58ch}
.chef-name{color:var(--c-primary)}
.chef-role{
  font-size:var(--t-small);font-weight:600;letter-spacing:.04em;
  color:var(--c-accent-ink);margin-top:-6px;
}
.chef-badge{
  display:inline-flex;align-items:center;gap:10px;justify-self:start;
  margin-top:6px;padding:8px 14px;border-radius:999px;
  background:var(--c-primary);color:#FFFFFF;
  font-size:var(--t-small);font-weight:600;line-height:1.3;
}
.chef-badge-dot{width:10px;height:10px;border-radius:50%;background:var(--c-accent);flex:none}
@media (min-width:760px){
  /* same two columns and gap as .chefs, so his portrait lines up with the two below */
  .chef--lead{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:center}
}

/* ---------- D. the three restaurants ---------- */
.rest-list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.rest{
  display:grid;gap:var(--s3);
  background:#FFFFFF;border:1px solid var(--c-line);border-radius:24px;
  box-shadow:var(--sh-1);padding:var(--s3);
}
@media (min-width:880px){
  .rest{
    grid-template-columns:minmax(0,240px) minmax(0,1fr) auto;
    align-items:center;gap:var(--s4);padding:var(--s4);
  }
  .rest:nth-child(2){margin-inline-start:var(--s3)}
  .rest:nth-child(3){margin-inline-start:var(--s5)}
}
.rest-town{color:var(--c-primary)}
.rest-sub{font-size:var(--t-small);color:var(--c-muted);margin-top:6px}
.rest-meta{display:grid;gap:10px}
.rest-addr{font-size:var(--t-body);line-height:1.5}
.rest-tel{
  font-size:var(--t-body);font-weight:600;color:var(--c-accent-ink);
  text-decoration:none;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;min-height:48px;
  transition:color .2s var(--ease);
}
.rest-tel:hover{color:var(--c-primary)}
.rest-hours{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-width:250px}
.rest-hours li{
  display:flex;justify-content:space-between;gap:var(--s2);
  font-size:var(--t-small);color:var(--c-muted);
  border-bottom:1px dotted var(--c-line);padding-bottom:4px;
}
.rest-hours b{color:var(--c-text);font-weight:600;font-variant-numeric:tabular-nums}
.rest-cta{justify-self:start}
@media (min-width:880px){ .rest-cta{justify-self:end} }
.rest-note{margin-top:var(--s3);max-width:60ch}
.company-note{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--c-line);
  display:grid;gap:8px;max-width:72ch;font-size:var(--t-small);color:var(--c-muted);
}
.company-note strong{color:var(--c-text);font-weight:600}

/* ---------- RUNDE 2l (2026-10-19): «Inne hos oss» — bildestripe ---------- */
.lok-slider{margin-top:var(--s4)}
.lok-track{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 var(--s2);border-radius:20px;outline-offset:6px}
.lok-track::-webkit-scrollbar{display:none}
.lok-track:focus-visible{outline:2px solid var(--c-accent)}
.lok-card{flex:0 0 min(72vw,340px);scroll-snap-align:start;margin:0;display:grid;gap:10px}
@media (min-width:760px){ .lok-track{gap:var(--s3)} .lok-card{flex-basis:calc((100% - 2 * var(--s3)) / 3.25)} }
.lok-fig{aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--c-bg);border:1px solid var(--c-line);box-shadow:var(--sh-1)}
.lok-fig img{width:100%;height:100%;object-fit:cover;display:block}
.lok-cap{font-size:var(--t-small);color:var(--c-muted);padding:0 4px}