/* ============================================================
   AKOPYAN AGENCY — page styles & interactions.
   Ported from the design document's inline <style> block, with
   responsive rules added for the multi-column section grids.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Client-logo sizing inside the marquee (component ships no fixed height) */
.ds-marquee .ds-clientlogo img { height: 62px; width: auto; max-width: 215px; object-fit: contain; }
.ds-marquee img[alt="Salzburg Schokolade"] { height: 82px; }
.ds-marquee img[alt="Vishay"] { height: 78px; }
.ds-marquee img[alt="MD Elektronik"] { height: 70px; }
.ds-marquee img[alt="Monteferro"] { max-width: 260px; }
.ds-marquee img[alt="Börger"] { height: 58px; }
.ds-marquee .ds-clientlogo { padding: 0 52px; }

/* Darker eyebrow on gold sections (legibility) */
#obory .eyebrow, #klienti .eyebrow, #co-zajistime .eyebrow { color: var(--navy-900); }

/* Co vám zajistíme — frosted cards + icons */
.benefit-card { background: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); border: 1px solid rgba(255,255,255,0.6); transition: transform 240ms var(--ease-out), background 200ms, border-color 200ms, box-shadow 200ms; }
.benefit-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.85); box-shadow: var(--shadow-md); }
.benefit-ico { color: var(--navy-700); transition: transform 240ms var(--ease-out), color 200ms; transform-origin: center; }
.benefit-ico svg { width: 26px; height: 26px; }
.benefit-card:hover .benefit-ico { transform: scale(1.1); color: var(--gold-600); }

/* Gold text on navy — subtle dark outline (mockup aplikuje na všechny gold-300 prvky) */
.gold-shadow, [style*="gold-300"] { text-shadow: 0 1px 2px rgba(12,35,44,0.6), 0 0 2px rgba(12,35,44,0.5); }

/* Vignette on navy photo bands */
.navy-band { position: relative; }
.navy-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 180px 8px rgba(12,35,44,0.42); }

/* Navigation — gold underline (hover + active scroll-spy) */
.aa-navlink { position: relative; padding-bottom: 5px; transition: color 160ms var(--ease-standard); }
.aa-navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease-out); }
.aa-navlink:hover { color: var(--navy-700); }
.aa-navlink:hover::after { transform: scaleX(1); }
.aa-navlink[data-active="true"] { color: var(--navy-700); }
.aa-navlink[data-active="true"]::after { transform: scaleX(1); }

/* Služby — editorial rows */
.ed-row { background: rgba(255,255,255,0.08); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); border: 1px solid rgba(255,255,255,0.14); transition: transform 240ms var(--ease-out), background 200ms, border-color 200ms; }
.ed-row:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.ed-row:hover .ed-title { color: var(--gold-200) !important; }

/* Profese — chip hover */
.p2-chip { transition: transform 220ms var(--ease-out), border-color 200ms, background 200ms, box-shadow 200ms, color 160ms; cursor: default; }
.p2-chip:hover { transform: translateY(-2px); border-color: var(--gold-400); background: var(--gold-50); color: var(--navy-900); box-shadow: var(--shadow-sm); }

/* Obory — icon grid hover */
.ind-grid-cell { transition: background 220ms var(--ease-standard), transform 240ms var(--ease-out); }
.ind-grid-cell .ind-ico { transition: transform 240ms var(--ease-out), color 200ms; transform-origin: center; }
.ind-grid-cell:hover { background: rgba(255,255,255,0.58); transform: translateY(-3px); }
.ind-grid-cell:hover .ind-ico { color: var(--gold-600) !important; transform: scale(1.1); }

/* Proč my — frosted cards hover */
.proc-card { transition: transform 240ms var(--ease-out), background 200ms, border-color 200ms; }
.proc-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.3) !important; }
.proc-ico { transition: transform 240ms var(--ease-out), color 200ms; transform-origin: center; display: inline-block; align-self: flex-start; }
.proc-card:hover .proc-ico { transform: scale(1.1); color: var(--gold-200) !important; }

/* Vedení — frosted cards on navy */
.lead-card { transition: transform 240ms var(--ease-out), background 200ms, border-color 200ms, box-shadow 200ms; }
.lead-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.3) !important; box-shadow: var(--shadow-md); }
.lead-avatar { transition: transform 240ms var(--ease-out); transform-origin: center; }
.lead-card:hover .lead-avatar { transform: scale(1.06); }

/* Contact links hover */
.contact-link:hover { color: var(--navy-700); }
.footer-link:hover { color: var(--gold-200); }

/* Kontaktní formulář — „Odeslat další zprávu" po úspěchu */
#contact-reset:hover { background: rgba(33,62,78,0.06); }

/* GDPR checkbox — navy fajfka na :checked (appearance:none nemá native značku) + odkaz */
input.ds-checkbox { transition: border-color 160ms var(--ease-standard), background 160ms; }
input.ds-checkbox:checked {
  background: var(--neutral-0) !important;
  border-color: var(--navy-700) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12'><path d='M2.3 6.3l2.4 2.4 5-5.4' stroke='%23213E4E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.gdpr-link { transition: color 160ms var(--ease-standard), text-decoration-color 160ms; }
.gdpr-link:hover { color: var(--gold-700); text-decoration-color: var(--gold-600); }

/* Profese tab buttons */
.p2-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: none; border-left: 2px solid transparent; background: transparent; color: var(--text-body); padding: 15px 18px; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; transition: all 180ms var(--ease-standard); }
.p2-tab:hover { background: rgba(33,62,78,0.04); color: var(--navy-700); }
.p2-tab[aria-selected="true"] { border-left: 2px solid var(--gold-400); background: var(--surface-card); color: var(--navy-700); font-weight: 700; box-shadow: var(--shadow-sm); }
.p2-tab__count { font-size: 12px; font-weight: 700; color: var(--gold-700); letter-spacing: .04em; }

/* Profese preview crossfade */
.p2-photo { transition: opacity 420ms var(--ease-standard); }

/* ============================================================
   LANGUAGE SWITCHER (textový přepínač sladěný s navigací)
   ============================================================ */
.lang-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.lang-globe { color: var(--navy-700); display: inline-flex; flex: 0 0 auto; padding-bottom: 4px; }
.lang-opt { position: relative; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); text-decoration: none; padding-bottom: 4px; transition: color 160ms var(--ease-standard); }
.lang-opt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out); }
.lang-opt:hover { color: var(--navy-700); }
.lang-opt:hover::after { transform: scaleX(1); }
.lang-active { color: var(--navy-700); font-weight: 700; cursor: default; }
.lang-sep { width: 1px; height: 13px; background: var(--border-subtle); flex: 0 0 auto; }
/* On mobile the main nav is hidden, so the switcher takes over the right-push */
@media (max-width: 900px) { header .lang-switch { margin-left: auto; } }

/* ============================================================
   MOBILNÍ NAVIGACE (burger + panel) — portováno z Design mockupu.
   Injektuje se přes site.js; desktop verze skryta na mobilu.
   ============================================================ */
.aa-burger { display: none; }
.aa-burger .ico-x { display: none; }
.aa-burger[data-open="true"] .ico-x { display: inline-flex; }
.aa-burger[data-open="true"] .ico-menu { display: none; }
.aa-mobile-panel { display: none; }
.aa-mobile-link { display: block; padding: 15px 4px; font-size: 16px; font-weight: 600; color: var(--text-body); text-decoration: none; border-bottom: 1px solid var(--border-subtle); transition: color 140ms; }
.aa-mobile-link:hover { color: var(--navy-700); }
@media (min-width: 901px) { .aa-mobile-panel { display: none !important; } }
@media (max-width: 900px) {
  .aa-burger { display: inline-flex !important; margin-left: auto; }
  .aa-desktop-only { display: none !important; }
}

/* ============================================================
   COOKIE LIŠTA + animace panelů — portováno z Design mockupu.
   ============================================================ */
@keyframes aaCookieIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aaPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.aa-cookie-box button[data-cc="all"]:hover { opacity: 0.92; }
.aa-cookie-box button[data-cc="necessary"]:hover { background: rgba(33,62,78,0.06); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .aa-nav { display: none !important; }
  .r-grid-2, .r-grid-3, .r-grid-4, .r-grid-profese, .r-grid-contact, .r-grid-footer, .r-grid-form { grid-template-columns: 1fr !important; }
  .r-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .r-cols-split { display: block !important; }
  .r-cols-split > div { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .r-grid-3, .r-grid-4 { grid-template-columns: 1fr !important; }
  .ds-marquee .ds-clientlogo { padding: 0 30px; }
}