/* kraft-group.hu — the portal layer on top of the shared design system (styles.css).
   styles.css stays byte-identical to the sibling sites outside its BRAND block; everything
   that only the group portal needs lives here. Tokens only — no literal colour that reads in
   one theme only. The company tiles are photo tiles: they stay dark in both themes, and each
   one carries its own company colour in --co-rgb (set on the tile). */

/* no main menu on the portal: the language switcher and the theme toggle sit on the right */
.is-portal .nav-inner > .langs { margin-left: auto; }

/* ── The three companies: full-height tiles, edge to edge (the old portal's layout) ───────── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: max(100svh, 640px); background: var(--deep); }
.co-card { --co: rgb(var(--co-rgb)); position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 22px) clamp(20px, 2.6vw, 44px) clamp(32px, 6vh, 64px); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; border-left: 1px solid var(--line-deep); animation: tile-in 1s var(--ease) both; animation-delay: var(--d, 0s); }
.co-card:first-child { border-left: 0; }
@keyframes tile-in { from { opacity: 0; } to { opacity: 1; } }
.co-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; filter: saturate(.8); transition: transform 1.2s var(--ease), filter var(--t-med); }
/* legibility shade: dark under the nav and at the bottom, lighter in the middle */
.co-card::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(var(--shade), .82) 0%, rgba(var(--shade), .45) 22%, rgba(var(--shade), .55) 50%, rgba(var(--shade), .92) 78%, rgba(var(--shade), .97) 100%); }
/* the company colour washes in on hover / focus (the old portal's signature) */
.co-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--co-rgb), .15) 0%, rgba(var(--co-rgb), .55) 45%, rgba(var(--co-rgb), .12) 80%); opacity: 0; transition: opacity var(--t-med) var(--ease); }
.co-card:hover::before, .co-card:focus-visible::before { opacity: 1; }
.co-card:hover > img, .co-card:focus-visible > img { transform: scale(1.05); filter: saturate(1); }
.co-card:focus-visible { outline: 2px solid var(--accent-on-deep); outline-offset: -6px; }

.co-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.co-n { display: inline-flex; align-items: center; gap: 10px; }
.co-n::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .85); border-right: 0; border-bottom: 0; border-radius: 2px 0 0 0; } /* crop mark */
.co-domain { text-transform: none; letter-spacing: .04em; }

.co-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.co-logo { height: clamp(58px, 5.6vw, 92px); width: auto; max-width: 100%; object-fit: contain; margin-bottom: 18px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); transition: transform var(--t-med) var(--ease); }
.co-card:hover .co-logo, .co-card:focus-visible .co-logo { transform: scale(1.04); }
.co-rule { display: block; width: 64px; height: 2px; border-radius: 2px; background: var(--co); transition: width var(--t-med) var(--ease), background var(--t-med); }
.co-card:hover .co-rule, .co-card:focus-visible .co-rule { width: 120px; background: #fff; }
.co-meta { color: rgba(255, 255, 255, .78); font-size: 11.5px; }
.co-text { font: 600 clamp(16px, 1.25vw, 19px)/1.4 var(--display); font-stretch: 96%; color: rgba(255, 255, 255, .94); max-width: 32ch; min-height: 4.2em; } /* three lines: the logos stay on one line across the tiles */
.co-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px 22px; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07); color: #fff; font-weight: 650; font-size: 15px; transition: background var(--t-med), color var(--t-med), border-color var(--t-med); }
.co-go .ic { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.co-lang { padding: 3px 6px; border-radius: var(--r-xs); border: 1px solid currentColor; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; opacity: .8; }
.co-card:hover .co-go, .co-card:focus-visible .co-go { background: #fff; border-color: #fff; color: var(--deep); }
.co-card:hover .co-go .ic, .co-card:focus-visible .co-go .ic { transform: translateX(4px); }

/* ── The group band under the tiles: one line about the group + the contact address ───────── */
.ribbon { position: relative; padding: 56px 0; background: var(--deep-2); color: var(--on-deep); border-top: 3px solid var(--accent); isolation: isolate; overflow: hidden; }
.ribbon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 100%, rgba(var(--accent-rgb), .22), transparent 60%), radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.ribbon-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px 56px; align-items: center; }
.ribbon .kicker { color: var(--accent-on-deep); margin-bottom: 12px; }
.ribbon h1 { color: var(--on-deep); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; margin-bottom: 12px; }
.ribbon h1 em { color: var(--accent-on-deep); }
.ribbon-copy p:last-child { color: var(--on-deep-muted); margin: 0; max-width: 62ch; }
.ribbon-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ribbon-mail { display: inline-flex; align-items: center; gap: 10px; color: var(--on-deep); text-decoration: none; font: 650 17px var(--display); }
.ribbon-mail .ic { width: 18px; height: 18px; color: var(--accent-on-deep); }
.ribbon-mail:hover span { text-decoration: underline; text-underline-offset: 4px; }
.ribbon :focus-visible { outline-color: var(--accent-on-deep); }

.foot-grid-group { grid-template-columns: 1.6fr 1fr 1.2fr; }

/* ── 404: a plain dark hero with the other languages under the Hungarian text ─────────────── */
.portal-404 { min-height: 80svh; justify-content: center; }
.portal-404 .hero-shade { background:
  radial-gradient(60% 55% at 88% 0%, rgba(var(--accent-rgb), .22), transparent 62%),
  linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%); }
.portal-head { max-width: 980px; }
.portal-404 h1 { font-size: clamp(38px, 5vw, 72px); margin-bottom: 20px; }
.nf-others { display: grid; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-deep); color: var(--on-deep-muted); max-width: 70ch; }
.nf-others p { margin: 0; }
.nf-others b { color: var(--on-deep); }
.nf-others a { color: var(--accent-on-deep); }

/* ── Responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .foot-grid-group { grid-template-columns: 1fr 1fr; }
  .foot-grid-group .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* stacked: each company gets most of a screen, logo still dominant */
  .tiles { grid-template-columns: 1fr; min-height: 0; }
  .co-card { min-height: 64svh; border-left: 0; border-top: 1px solid var(--line-deep); padding-top: 22px; padding-bottom: 36px; gap: 40px; }
  .co-card:first-child { min-height: calc(64svh + var(--nav-h)); padding-top: calc(var(--nav-h) + 18px); border-top: 0; }
  .co-logo { height: clamp(58px, 11vw, 84px); }
  .co-text { min-height: 0; }
  .ribbon-inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* no burger menu on the portal: the language switcher stays in the bar on phones */
  .is-portal .nav-inner > .langs { display: flex; margin-left: auto; }
  .is-portal .langs a, .is-portal .langs span { padding: 8px 5px; }
  .is-portal .theme-toggle { margin-left: 0; }
  .co-card { min-height: 520px; }
  .co-card:first-child { min-height: calc(520px + var(--nav-h)); }
  .co-logo { height: clamp(52px, 15vw, 70px); margin-bottom: 8px; }
  .ribbon { padding: 44px 0; }
  .ribbon-actions, .ribbon-actions .btn { width: 100%; }
  .foot-grid-group { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .brand img { height: 26px; }
  .is-portal .theme-toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .co-card { animation: none; }
  .co-card, .co-card > img, .co-card::before, .co-rule, .co-go, .co-go .ic, .co-logo { transition: none; }
}