:root {
  --aghor-green: oklch(56.6% 0.114 143.2);
  --aghor-yellow: oklch(83.4% 0.165 91.5);
  --aghor-orange: oklch(66% 0.19 46.3);
  --aghor-blue: oklch(50% 0.128 249.5);
  --aghor-black: oklch(21% 0.004 100);
  --aghor-white: oklch(99% 0 0);
  --aghor-cream: oklch(97.5% 0.018 95);
  --editorial-page: oklch(95.8% 0.006 245);
  --editorial-surface: oklch(98.5% 0.003 245);
  --editorial-shadow: 0 3px 14px -8px rgba(27, 27, 24, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--aghor-black);
}

.font-baseline {
  font-family: "Poppins", sans-serif;
}

h1,
p {
  margin: 0;
}

.editorial-page {
  min-height: 100svh;
  padding: 0 32px 28px;
  background: var(--editorial-page);
}

.editorial-horizontal {
  background:
    radial-gradient(58% 42% at 12% 6%, var(--aghor-yellow), transparent 72%),
    radial-gradient(52% 40% at 90% 12%, var(--aghor-blue), transparent 72%),
    radial-gradient(64% 46% at 50% 104%, var(--aghor-green), transparent 74%),
    var(--aghor-cream);
}

@supports (color: color-mix(in lab, red, red)) {
  .editorial-horizontal {
    background:
      radial-gradient(58% 42% at 12% 6%, color-mix(in oklab, var(--aghor-yellow) 16%, transparent), transparent 72%),
      radial-gradient(52% 40% at 90% 12%, color-mix(in oklab, var(--aghor-blue) 12%, transparent), transparent 72%),
      radial-gradient(64% 46% at 50% 104%, color-mix(in oklab, var(--aghor-green) 14%, transparent), transparent 74%),
      var(--aghor-cream);
  }
}

@media (hover: hover) {
  .editorial-horizontal {
    background-attachment: fixed;
  }
}

.editorial-tricolor {
  height: 7px;
  margin: 0 -32px;
  background-image: linear-gradient(90deg, var(--aghor-yellow) 0 33.333%, var(--aghor-orange) 33.333% 66.666%, var(--aghor-blue) 66.666% 100%);
}

.editorial-header {
  --brand-width: min(440px, 80vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 0 26px;
}

.editorial-header h1 {
  margin: 0 0 -35px;
}

.editorial-group-logo {
  width: var(--brand-width);
  max-width: 100%;
  height: auto;
  display: block;
}

.editorial-tagline {
  width: var(--brand-width);
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--aghor-green);
  letter-spacing: 0;
}

@media (min-width: 1536px) {
  .editorial-header {
    --brand-width: min(440px, 80vw);
    padding: 36px 0 72px;
  }
}

.editorial-strips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1840px;
  margin: 0 auto;
}

.editorial-agriculture {
  --strip-accent: var(--aghor-yellow);
  --bar-ink: var(--aghor-black);
}

.editorial-landscape {
  --strip-accent: var(--aghor-orange);
  --bar-ink: var(--aghor-black);
}

.editorial-urban {
  --strip-accent: var(--aghor-blue);
  --bar-ink: var(--aghor-white);
}

.editorial-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(250px, min(42svh, 410px)) auto;
  text-decoration: none;
  color: inherit;
  background: var(--editorial-surface);
  box-shadow: var(--editorial-shadow);
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .editorial-strip {
    box-shadow: 0 3px 14px -8px color-mix(in oklab, var(--aghor-black) 25%, transparent);
  }
}

.editorial-bar {
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  padding: 12px 18px;
  background: var(--strip-accent);
  color: var(--bar-ink);
}

.editorial-bar-text {
  margin: 0;
  color: var(--aghor-cream);
  text-transform: uppercase;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .editorial-bar-text {
    font-size: 30px;
  }
}

.editorial-photo {
  grid-area: 2 / 1;
  overflow: hidden;
}

.editorial-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s;
}

.editorial-identity {
  grid-area: 3 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 176px;
  padding: 24px 30px 25px;
  background: var(--editorial-surface);
}

.editorial-division-logo {
  width: 350px;
  max-width: calc(100% - 22px);
  height: auto;
  display: block;
}

.editorial-strip:hover .editorial-photo img {
  transform: scale(1.035);
}

.editorial-strip:focus-visible {
  outline: 3px solid var(--aghor-green);
  outline-offset: 4px;
}

@media (max-width: 1400px) {
  .editorial-header {
    --brand-width: min(390px, 80vw);
  }

  .editorial-group-logo {
    width: 390px;
  }

  .editorial-strips {
    gap: 14px;
  }

  .editorial-identity {
    padding: 20px 18px;
  }
}

@media (max-width: 1024px) {
  .editorial-page {
    padding: 0 24px 24px;
  }

  .editorial-tricolor {
    margin: 0 -24px;
  }

  .editorial-header {
    --brand-width: min(310px, 80vw);
    padding: 24px 0 44px;
  }

  .editorial-group-logo {
    width: 310px;
  }

  .editorial-strips {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .editorial-strip {
    grid-template-rows: auto 180px auto;
  }

  .editorial-bar {
    min-height: 50px;
    padding: 10px 14px;
  }

  .editorial-identity {
    min-height: 128px;
    padding: 18px 22px;
  }

  .editorial-division-logo {
    width: 290px;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 640px) {
  .editorial-page {
    padding: 0 16px 18px;
  }

  .editorial-tricolor {
    margin: 0 -16px;
  }

  .editorial-header {
    --brand-width: min(300px, 82vw);
    gap: 4px;
    padding: 20px 0 32px;
  }

  .editorial-group-logo {
    width: min(300px, 82vw);
    max-width: 82vw;
  }

  .editorial-strips {
    gap: 14px;
  }

  .editorial-bar-text {
    font-size: 20px;
  }
}

@media (max-width: 820px) {
  .editorial-bar-text {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-photo img {
    transition: none;
  }

  .editorial-strip:hover .editorial-photo img {
    transform: none;
  }
}