/* AGRP[DEV] - otevřené pozice a inzeráty (/otevrene-pozice, /job/<slug>)
 *
 * Inzeráty byly v originálu skládané v page builderu, ale z opakujících se
 * bloků: úvod s obrázkem a štítky (.job-hero), sekce text + obrázek/video
 * (.job-split), šedé boxy (.job-boxes / .job-box), centrovaná sekce
 * (.job-center), pás log technologií (.logo-marquee), rozbalovací blok
 * (.job-accordion) a formulář Recruitis (.job-form).
 */

/* ── Úvod inzerátu ──────────────────────────────────────────────────── */

/* Rozšiřuje .page-hero (obrázek vpravo přes --hero-img + přechod do černé) */
.job-hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-block: var(--space-m);
}

.job-hero .container {
  width: 100%;
}

.job-hero .container > * {
  max-width: 684px;
}

.job-hero .title {
  margin-bottom: 18px;
}

.job-hero .display {
  margin-bottom: 18px;
}

.job-tags {
  margin: 0 0 18px;
}

.job-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 18px 36px;
  margin-top: var(--space-s);
}

.job-hero-actions .btn {
  justify-self: start;
}

.job-hero-actions .mark {
  font-size: 22px;
}

.btn--xl {
  padding: 12px 24px;
  font-size: 24px;
}

@media (max-width: 569px) {
  .job-hero {
    min-height: 0;
  }

  .job-hero-actions {
    grid-template-columns: 1fr;
  }

  .job-hero-actions .mark {
    font-size: 18px;
  }
}

/* Jednoduchý nadpis inzerátu bez obrázku (starší inzeráty) */
.job-head {
  padding-block: var(--space-m) var(--space-s);
}

.job-head .title {
  margin: 0;
  font-size: var(--fs-h3);
}

/* ── Sekce ──────────────────────────────────────────────────────────── */

.job-section {
  padding-block: var(--space-m);
}

.job-section--tight {
  padding-top: 0;
}

.job-section--flush {
  padding-bottom: 0;
}

/* Text + obrázek/video: text zabírá 2/3, médium 1/3 (pořadí dle HTML).
   Na mobilu jde médium nad text. */
.job-split {
  padding-block: var(--space-l) var(--space-m);
}

.job-split-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.job-split-text {
  grid-column: span 2;
}

.job-split-text > .title {
  margin-bottom: var(--space-s);
}

.job-split-text > .display {
  margin-bottom: var(--space-s);
}

/* Fotka vedle textu: na výšku jako svislé video (9:16), černobílá,
   stejně široká jako .job-video; text je zarovnaný na její střed. */
.job-split-media img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  filter: grayscale(100%);
}

.job-split-media--small img {
  width: 90%;
}

@media (max-width: 959px) {
  .job-split-grid {
    grid-template-columns: 1fr;
  }

  .job-split-text {
    grid-column: auto;
  }

  .job-split-media {
    order: -1;
  }
}

/* Svislé video YouTube (černobílé, jako v originálu) */
.job-video {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--grey-900);
}

.job-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%);
}

/* Text inzerátu */
.job-text > * {
  margin: 0;
}

.job-text > * + * {
  margin-top: 1.2em;
}

.job-text ul {
  padding-left: 1.2em;
}

.job-text li + li {
  margin-top: 0.35em;
}

.job-text strong {
  color: var(--green);
}

.job-text a {
  color: var(--green);
}

.job-text h3 {
  color: var(--green);
  font-size: var(--fs-h4);
}

.job-text.accent {
  color: var(--green);
}

/* Ikona uvozovek u citátu */
.job-quote {
  width: 40px;
  margin-bottom: var(--space-xs);
}

/* Centrovaná sekce (Tech stack, Ucházet se o pozici …) */
.job-center {
  text-align: center;
}

.job-center .title,
.job-center .display {
  margin-bottom: var(--space-s);
}

/* ── Šedé boxy ──────────────────────────────────────────────────────── */

.job-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  align-items: start;
}

.job-boxes--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-boxes--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.job-boxes + .job-boxes,
.mark + .job-boxes {
  margin-top: var(--space-s);
}

.job-box {
  padding: 36px;
  background: #141618;
}

.job-box-title {
  margin: 0 0 18px;
  color: var(--green);
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
}

@media (max-width: 959px) {
  .job-boxes,
  .job-boxes--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 569px) {
  .job-boxes,
  .job-boxes--2,
  .job-boxes--4 {
    grid-template-columns: 1fr;
  }

  .job-box {
    padding: 24px;
  }
}

/* ── Pás log technologií ────────────────────────────────────────────── */

.logo-marquee {
  overflow: hidden;
  padding-block: var(--space-xs) var(--space-s);
}

.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 40s linear infinite;
}

.logo-marquee img {
  flex: none;
  width: 100px;
  height: 100px;
  padding: 30px;
}

@keyframes logo-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .logo-marquee-track [aria-hidden="true"] {
    display: none;
  }
}

/* ── Rozbalovací blok ───────────────────────────────────────────────── */

.job-accordion {
  margin-top: var(--space-s);
  border-block: 1px solid var(--line);
}

.job-accordion summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.job-accordion summary::-webkit-details-marker {
  display: none;
}

.job-accordion summary::before {
  content: "</>";
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
}

.job-accordion summary::after {
  content: "›";
  margin-left: auto;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 20px;
  transition: transform 0.2s var(--ease);
}

.job-accordion[open] summary::after {
  transform: rotate(90deg);
}

.job-accordion summary:hover {
  color: var(--green);
}

.job-accordion-body {
  padding: 4px 20px 24px;
}

/* ── Formulář Recruitis ─────────────────────────────────────────────── */

.job-form {
  padding-block: var(--space-s) var(--space-m);
}

.job-form .title {
  margin-bottom: var(--space-s);
}

.job-form iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: 1px solid var(--green);
  border-radius: 4px;
  background: var(--black);
}

@media (max-width: 569px) {
  .job-form iframe {
    height: 1500px;
  }
}

/* ── Starší inzerát (Product Owner) ─────────────────────────────────── */

.job-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-facts-icon {
  display: block;
  margin-bottom: 18px;
  font-size: 40px;
  line-height: 1.2;
}

@media (max-width: 959px) {
  .job-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.job-classic h3 {
  margin: 1.2em 0 0.6em;
  color: var(--green);
  font-size: var(--fs-h4);
}

.job-classic h3:first-child {
  margin-top: 0;
}

.job-profile {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-s);
  align-items: start;
}

.job-profile blockquote {
  margin: 0;
  font-style: italic;
}

@media (max-width: 569px) {
  .job-profile {
    grid-template-columns: 1fr;
  }

  .job-profile img {
    max-width: 240px;
  }
}

/* ── Výpis pozic (/otevrene-pozice) ─────────────────────────────────── */

.jobs-intro {
  padding-block: var(--space-m) 0;
}

.jobs-intro .title {
  margin: 0;
}

.jobs-list {
  padding-block: var(--space-s) var(--space-l);
}

.jobs-list .filters {
  margin-bottom: var(--space-s);
}

.jobs-other {
  margin-top: var(--space-m);
}

.jobs-other p {
  margin-bottom: 18px;
}

/* Kroky výběrového řízení: animace vlevo/vpravo + text */
.jobs-step {
  padding-block: var(--space-m) 0;
}

.jobs-step:last-of-type {
  padding-bottom: var(--space-m);
}

.jobs-step .subtitle {
  margin-bottom: 18px;
}

/* Videa v posledním bloku mají úzký sloupec */
.job-split-media .job-video {
  max-width: 420px;
}

.job-center .btn-row,
.job-split-text .btn-row {
  margin-top: var(--space-s);
}

/* Nadpis velikosti .subtitle (starší inzerát, formulář) */
.title.subtitle-size {
  font-size: var(--fs-sub);
}

.job-text h4 {
  color: var(--green);
  font-size: 20px;
}

.job-text h4 + p {
  margin-top: 0.6em;
}

.title.job-subhead {
  margin-top: var(--space-s);
}

/* ── Get to know us (stránka pro kandidáty chráněná heslem) ─────────── */

.gtk-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-m);
}

.gtk-gallery a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--grey-900);
}

.gtk-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gtk-gallery a:hover img {
  transform: scale(1.05);
}

.gtk-contact-cards {
  margin-top: var(--space-m);
}

@media (max-width: 959px) {
  .gtk-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 569px) {
  .gtk-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}