/* =============================================================================
   assets/css/home-duo.css — Ana səhifədəki "Forum | Məhsullar" ikili paneli

   Əvvəllər bu iki bölmə tam enli, ayrı-ayrı sətirlərdə dururdu və səhifənin
   böyük hissəsini yeyirdi. İndi ikisi bir vahid kartın içində, şaquli incə
   ayırıcı ilə yan-yana durur.

   Bütün siniflər "hd-" prefiksi ilədir — heç bir qlobal sinfin üzərinə
   yazmır. Yalnız panelin İÇİNDƏKİ .job-card kartları kiçildilir, ona görə
   həmin seçicilər .hd-panel ilə məhdudlaşdırılıb.

   Rənglər saytın mövcud dəyişənlərindən götürülür (assets/css/style.css).
   ============================================================================= */

/* --- Panelin altındakı yumşaq zolaq -------------------------------------
   Qradiyent həm yuxarıda, həm aşağıda ağa qayıdır. Yalnız aşağıya doğru
   tündləşsəydi, bu bölmə bitən yerdə növbəti (ağ fonlu) CTA bölməsi ilə
   arasında gözlə görünən kəskin sərhəd xətti qalardı. */
.hd-section {
  padding: 30px 0 34px;
  background: linear-gradient(
    180deg,
    var(--color-bg, #fff) 0%,
    var(--color-bg-soft, #fff8f8) 46%,
    var(--color-bg-soft, #fff8f8) 62%,
    var(--color-bg, #fff) 100%
  );
}

/* --- Panel ---------------------------------------------------------------
   Kölgə iki laylıdır: birinci lay kənarı dəqiqləşdirir, ikinci lay panelin
   altında geniş və çox yumşaq bir işıq yaradır. Tək kölgədən daha "bahalı"
   görünür və kartların öz kölgəsi ilə qarışmır. */
.hd-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #f1e4e6);
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgba(36, 20, 23, .04),
    0 18px 44px -26px rgba(180, 20, 50, .18);
  overflow: hidden;
}

/* Yalnız bir bölmədə məzmun varsa panel tək sütuna çevrilir. */
.hd-panel.hd-panel-single { grid-template-columns: 1fr; }

/* --- Yarımlar ------------------------------------------------------------ */
.hd-half {
  position: relative;
  padding: 34px 34px 36px;
  min-width: 0; /* grid sütununun məzmuna görə şişməsinin qarşısını alır */
}

/* Şaquli ayırıcı: düz xətt əvəzinə uclarında əriyən qradiyent —
   kartın küncləri ilə toqquşmur, daha səliqəli görünür. */
.hd-half + .hd-half::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--color-border, #f1e4e6) 14%,
    var(--color-border, #f1e4e6) 86%,
    transparent
  );
}

/* --- Başlıq sətri -------------------------------------------------------- */
.hd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.hd-head-text { min-width: 0; }

.hd-eyebrow {
  display: block;
  color: var(--color-primary, #f43f5e);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hd-half h2 {
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1.12;
  margin: 0;
}

.hd-half p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-ink-soft, #5c464a);
  max-width: 44ch;
}

/* --- "Bütün ..." düyməsi -------------------------------------------------
   Sağdakı ox düymənin öz mətnindən deyil, SVG-dən gəlir — mətnə "→" yapışdırmaq
   ekran oxuyucularda mənasız simvol kimi oxunur. */
.hd-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 18px 12px 24px;
  border: 1.5px solid var(--color-border-strong, #f2c9cf);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface, #fff);
  color: var(--color-ink, #241417);
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease,
              box-shadow .16s ease, transform .12s ease;
}

.hd-more svg {
  flex-shrink: 0;
  color: var(--color-primary, #f43f5e);
  transition: transform .16s ease;
}

.hd-more:hover {
  border-color: var(--color-primary, #f43f5e);
  background: var(--color-primary-tint, #fff1f3);
  color: var(--color-primary-dark, #d81f3d);
  box-shadow: 0 6px 16px -8px rgba(216, 31, 61, .5);
}

.hd-more:hover svg { transform: translateX(3px); }
.hd-more:active { transform: scale(.98); }

/* --- Kart şəbəkəsi ------------------------------------------------------- */
.hd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Tək bölmə qaldıqda (məs. Məhsul modulu yoxdur) yarım bütün paneli tutur.
   Orada da 2 sütun saxlasaydıq, hər kart ~520px enində olardı və şəkil
   nəhəng görünərdi. auto-fill ilə kartlar normal ölçüdə qalır və sola
   yığılır — köhnə .forum-grid / .mehsul-grid davranışı ilə eynidir. */
.hd-panel-single .hd-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Panelin içindəki kartlar sıxılır: sütun eni yarıya düşdüyü üçün orijinal
   24px daxili boşluq və 22px künc radiusu burada ağır görünür. */
.hd-panel .job-card {
  padding: 14px;
  border-radius: 18px;
}

/* Kartların öz hover effekti panelin içində daha təmkinli olmalıdır —
   4px sıçrayış və böyük kölgə panelin sərhədinə dirənir. */
.hd-panel .job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(180, 20, 50, .08));
}

.hd-panel .job-card h3 { font-size: 15.5px; }

/* --- Adaptiv ------------------------------------------------------------- */

/* Planşet: iki yarım alt-alta düşür, şaquli ayırıcı üfüqiyə çevrilir. */
@media (max-width: 980px) {
  .hd-panel { grid-template-columns: 1fr; }

  .hd-half + .hd-half::before {
    left: 28px;
    right: 28px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-border, #f1e4e6) 14%,
      var(--color-border, #f1e4e6) 86%,
      transparent
    );
  }
}

@media (max-width: 760px) {
  .hd-section { padding: 22px 0 26px; }
  .hd-panel { border-radius: 22px; }
  .hd-half { padding: 26px 20px 28px; }
  .hd-half + .hd-half::before { left: 20px; right: 20px; }
  .hd-head { flex-direction: column; gap: 16px; }
  .hd-more { width: 100%; justify-content: center; padding-left: 20px; }
}

/* Telefonda iki kart yan-yana çox darlaşır — kartın alt sətrindəki ad və
   tarix qırılmağa başlayır. Ona görə tək sütuna keçirik. */
@media (max-width: 540px) {
  .hd-grid { grid-template-columns: 1fr; }
}