/* ClutchHub v147 — white tactical homepage refresh.
   Loaded after the compiled bundle so application behaviour stays untouched. */
:root {
  --ch-navy: #14223a;
  --ch-ink: #26364f;
  --ch-orange: #ff5a18;
  --ch-orange-dark: #ed430c;
  --ch-line: #d7e1ec;
  --ch-soft: #f6f9fc;
}

body {
  background:
    linear-gradient(rgb(218 228 239 / 28%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(218 228 239 / 24%) 1px, transparent 1px),
    #f7f9fc;
  background-size: 34px 34px;
}

@media (width >= 1024px) {
  .site-header {
    width: 100% !important;
    height: auto !important;
    padding: 7px 8px 0 !important;
    background: rgb(255 255 255 / 96%) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .header-inner {
    width: min(1680px, calc(100% - 8px)) !important;
    min-height: 92px !important;
    grid-template-columns: 310px minmax(610px, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 25px !important;
    clip-path: polygon(
      18px 0,
      20% 0,
      calc(20% + 22px) 18px,
      73% 18px,
      calc(73% + 22px) 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      18px 100%,
      0 calc(100% - 18px),
      0 18px
    ) !important;
    background:
      linear-gradient(90deg, rgb(221 230 240 / 62%) 1px, transparent 1px) 0 0 / 185px 100%,
      linear-gradient(180deg, #fff, #fbfdff) !important;
    border: 1px solid #d3deea !important;
    box-shadow: 0 9px 24px rgb(27 44 70 / 12%) !important;
    overflow: hidden !important;
  }

  .header-inner::before,
  .header-inner::after {
    display: block !important;
    height: 2px !important;
    left: 18px !important;
    right: 18px !important;
  }

  .header-inner::before {
    background: linear-gradient(90deg, var(--ch-orange) 0 82px, #d4dfeb 82px 31%, transparent 31% 78%, #d4dfeb 78% 93%, #ff9a5c 93%) !important;
  }

  .header-inner::after {
    background: linear-gradient(90deg, #d4dfeb 0 17%, transparent 17% 73%, #ff8b47 73% 82%, #d4dfeb 82%) !important;
  }

  .header-inner > .brand .brand-mark {
    width: 57px !important;
    height: 64px !important;
    background: linear-gradient(145deg, #ff711f, #ef3f08) !important;
    filter: drop-shadow(0 7px 10px rgb(240 68 11 / 25%)) !important;
  }

  .header-inner > .brand .brand-name {
    font-size: 32px !important;
    letter-spacing: -0.8px !important;
  }

  .main-nav {
    align-items: stretch !important;
    gap: 2px !important;
  }

  .nav-link {
    padding: 0 clamp(12px, 1.05vw, 19px) !important;
    font-size: 13px !important;
  }

  .nav-link::after {
    bottom: 15px !important;
  }

  .header-actions,
  .header-actions.authenticated {
    gap: 5px !important;
  }

  .header-actions > .premium-header-link {
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 14px 4px !important;
  }

  .header-actions > .profile-chip,
  .header-actions.authenticated > .profile-chip {
    min-width: 176px !important;
    min-height: 62px !important;
    grid-template-columns: 48px minmax(0, 1fr) 14px !important;
    border-radius: 20px 5px !important;
    background: rgb(255 255 255 / 82%) !important;
  }
}

.home-v3 {
  width: min(1640px, calc(100% - 24px)) !important;
  gap: 16px !important;
  margin: 17px auto 50px !important;
}

.home-v3-hero {
  min-height: 495px !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(520px, 0.94fr) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 14px;
  overflow: visible !important;
}

.home-v3-hero-art {
  min-height: 495px;
  align-items: center !important;
  padding: 48px 50px !important;
  clip-path: polygon(20px 0, 45% 0, calc(45% + 20px) 18px, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 20px);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 94%) 31%, rgb(255 255 255 / 60%) 50%, rgb(255 255 255 / 5%) 76%),
    linear-gradient(0deg, rgb(239 245 251 / 40%), rgb(255 255 255 / 10%)),
    url("/assets/clutchhub-hero-light.webp") 64% 45% / cover no-repeat !important;
  border: 1px solid var(--ch-line);
  box-shadow: 0 14px 35px rgb(28 47 75 / 14%);
}

.home-v3-hero-art::before {
  width: 155px !important;
  height: 46px !important;
  top: 13px !important;
  left: 14px !important;
  border-color: var(--ch-orange) !important;
}

.home-v3-hero-art::after {
  width: 210px !important;
  right: 17px !important;
  bottom: 14px !important;
  border-color: #ff9b5d !important;
}

.home-v3-hero-copy {
  width: min(610px, 66%) !important;
  gap: 16px !important;
  padding: 0 0 2px !important;
}

.home-v3-live-kicker {
  color: var(--ch-orange-dark) !important;
  font-size: 10px !important;
}

.home-v3-hero-copy h1 {
  color: var(--ch-navy) !important;
  font-size: clamp(54px, 4.15vw, 75px) !important;
  line-height: 0.91 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 0 2px 0 rgb(255 255 255 / 90%) !important;
}

.home-v3-hero-copy h1 strong {
  color: var(--ch-orange) !important;
}

.home-v3-hero-copy p {
  max-width: 535px !important;
  color: #425168 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 0 #fff !important;
}

.home-v3-primary-action,
.home-v3-secondary-action {
  min-height: 54px !important;
  padding: 0 25px !important;
  border-radius: 0 !important;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  font-size: 12px !important;
}

.home-v3-primary-action {
  box-shadow: 0 10px 24px rgb(255 82 15 / 30%) !important;
}

.home-v3-secondary-action {
  color: var(--ch-navy) !important;
  border: 1px solid #cbd8e6 !important;
  background: rgb(255 255 255 / 94%) !important;
}

.home-v3-hero-edge {
  display: none !important;
}

.home-v3-live-panel {
  min-height: 495px;
  padding: 26px 25px 22px !important;
  clip-path: polygon(18px 0, 43% 0, calc(43% + 18px) 16px, calc(100% - 18px) 16px, 100% 34px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 16px 100%, 0 calc(100% - 16px), 0 18px);
  border: 1px solid var(--ch-line);
  background:
    linear-gradient(rgb(220 230 240 / 55%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(220 230 240 / 45%) 1px, transparent 1px),
    linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(247 250 253 / 98%)) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  box-shadow: 0 14px 35px rgb(28 47 75 / 14%);
}

.home-v3-live-panel > header {
  border-bottom: 1px solid #d8e2ed;
  padding: 0 3px 13px;
}

.home-v3-live-panel > header h2 {
  font-size: 18px !important;
}

.home-v3-live-stats {
  margin-top: 16px !important;
  padding: 12px 5px !important;
  border-radius: 9px 2px !important;
  background: rgb(255 255 255 / 92%) !important;
}

.home-v3-live-stats strong {
  font-size: 22px !important;
}

.home-v3-mini-heading {
  margin: 17px 2px 10px !important;
}

.home-v3-mini-heading strong {
  font-size: 9px !important;
}

.home-v3-new-lfg {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.home-v3-new-lfg > a,
.home-v3-new-lfg > a:nth-child(3) {
  min-height: 74px;
  grid-template-columns: 51px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center;
  gap: 11px !important;
  padding: 9px 11px !important;
  border-radius: 8px 2px !important;
  background: rgb(255 255 255 / 94%) !important;
  display: grid !important;
}

.home-v3-lfg-icon {
  width: 49px !important;
  height: 49px !important;
  border-radius: 9px 2px !important;
}

.home-v3-lfg-icon img {
  width: 37px !important;
  height: 37px !important;
}

.home-v3-new-lfg > a > div strong {
  font-size: 11px !important;
}

.home-v3-new-lfg > a > div span,
.home-v3-new-lfg footer {
  font-size: 7.5px !important;
}

.home-v3-new-lfg footer {
  min-width: 98px;
  justify-content: flex-end;
}

.home-v3-middle-grid,
.home-v3-bottom-grid {
  gap: 15px !important;
}

.home-v3-middle-grid {
  grid-template-columns: minmax(0, 2.08fr) minmax(330px, 0.92fr) !important;
}

.home-v3-panel {
  padding: 20px 22px !important;
  border-radius: 0 !important;
  clip-path: polygon(16px 0, 42% 0, calc(42% + 14px) 13px, calc(100% - 15px) 13px, 100% 28px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 14px 100%, 0 calc(100% - 14px), 0 16px);
  background:
    linear-gradient(90deg, rgb(225 233 242 / 24%) 1px, transparent 1px),
    rgb(255 255 255 / 96%) !important;
  background-size: 130px 100%, auto !important;
  border: 1px solid var(--ch-line) !important;
  box-shadow: 0 10px 28px rgb(24 41 65 / 10%) !important;
}

.home-v3-panel-heading {
  margin-bottom: 15px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e8f0;
}

.home-v3-panel-heading h2 {
  font-size: 15px !important;
}

.home-v3-clip-grid {
  gap: 10px !important;
}

.home-v3-clip-media {
  height: 168px !important;
  border-radius: 8px 2px !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.home-v3-clip-grid > a > strong {
  font-size: 9px !important;
}

.home-v3-bot-card {
  background:
    radial-gradient(circle at 100% 0, rgb(255 90 24 / 12%), transparent 42%),
    linear-gradient(145deg, #fff, #f5f8fb) !important;
}

.home-v3-bot-intro,
.home-v3-bot-actions a {
  border-radius: 8px 2px !important;
}

.home-v3-bottom-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.8fr) minmax(330px, 1fr) !important;
}

@media (width < 1280px) {
  .home-v3-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(450px, 0.88fr) !important;
  }

  .home-v3-hero-copy {
    width: min(580px, 76%) !important;
  }

  .home-v3-bottom-grid {
    grid-template-columns: 1.15fr 0.85fr !important;
  }

  .home-v3-active-chat {
    grid-column: 1 / -1;
  }

  .home-v3-active-chat > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 1080px) {
  .home-v3-hero {
    grid-template-columns: 1fr !important;
  }

  .home-v3-hero-art {
    min-height: 460px;
  }

  .home-v3-live-panel {
    min-height: auto;
  }

  .home-v3-middle-grid,
  .home-v3-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  .home-v3-active-chat {
    grid-column: auto;
  }
}

@media (width < 720px) {
  .home-v3 {
    width: min(100% - 14px, 1640px) !important;
    margin-top: 9px !important;
  }

  .home-v3-hero-art {
    min-height: 420px;
    padding: 29px 22px !important;
    background:
      linear-gradient(90deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 88%) 52%, rgb(255 255 255 / 24%)),
      url("/assets/clutchhub-hero-light.webp") 62% center / cover no-repeat !important;
  }

  .home-v3-hero-copy {
    width: 100% !important;
  }

  .home-v3-hero-copy h1 {
    font-size: clamp(42px, 12vw, 57px) !important;
  }

  .home-v3-hero-copy p {
    max-width: 92% !important;
    font-size: 12px !important;
  }

  .home-v3-primary-action,
  .home-v3-secondary-action {
    min-height: 48px !important;
    padding: 0 17px !important;
  }

  .home-v3-live-panel,
  .home-v3-panel {
    padding: 17px 13px !important;
  }

  .home-v3-new-lfg > a,
  .home-v3-new-lfg > a:nth-child(3) {
    grid-template-columns: 45px minmax(0, 1fr) !important;
  }

  .home-v3-new-lfg footer {
    display: none !important;
  }

  .home-v3-active-chat > div:last-child {
    grid-template-columns: 1fr;
  }
}