/* =============================================================
   Digital Hive - Resources page styles
   ============================================================= */

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
.res-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border-2);
  background: linear-gradient(180deg, #ECF1F6 0%, #F2F5F9 100%);
}
@media (min-width: 768px) { .res-hero { padding: 80px 0 56px; } }
.res-hero h1 {
  margin: var(--space-4) 0 0;
  max-width: 18ch;
}

/* -----------------------------------------------------------
   Featured resource - full-width navy band with gated form
   ----------------------------------------------------------- */
.feat {
  background: var(--dh-navy);
  color: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .feat { padding: 72px 0; } }
.feat::after {
  /* faint hex motif */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><polygon points='30,1 59,17 59,35 30,51 1,35 1,17' fill='none' stroke='%23ffffff' stroke-width='0.4' stroke-opacity='0.06'/></svg>");
  background-size: 60px 52px;
  pointer-events: none;
}
.feat .container { position: relative; }

.feat__grid {
  display: grid;
  gap: 80px;
  align-items: center;
}
@media (min-width: 900px) { .feat__grid { grid-template-columns: 1fr 1fr; } }

.feat__copy .eyebrow { color: var(--dh-yellow); }
.feat__copy h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: var(--space-3) 0 var(--space-4);
  text-wrap: balance;
}
.feat__copy p {
  color: rgba(255,255,255,0.78);
  font-size: var(--fs-18);
  margin: 0 0 var(--space-6);
  line-height: 1.55;
  max-width: 480px;
}
.feat__meta {
  display: flex;
  gap: var(--space-5);
  font-size: var(--fs-12);
  color: rgba(255,255,255,0.55);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin-top: var(--space-6);
}
.feat__meta .dot {
  align-self: center;
  width: 3px; height: 3px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* Form */
.feat__form {
  background: var(--dh-white);
  color: var(--dh-navy);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
@media (min-width: 768px) { .feat__form { padding: var(--space-8); } }
.feat__form-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  margin-bottom: var(--space-5);
}
.feat__form-head .lock {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  color: var(--dh-orange);
}
.feat__form h3 {
  font-size: var(--fs-24);
  letter-spacing: -0.01em;
  color: var(--dh-navy);
  margin: 0 0 var(--space-5);
}
.feat__form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .feat__form-grid { grid-template-columns: 1fr 1fr; }
  .feat__form-grid .full { grid-column: 1 / -1; }
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}
.field input,
.field select {
  font-family: inherit;
  font-size: var(--fs-16);
  color: var(--dh-navy);
  background: var(--dh-white);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field input:focus,
.field select:focus {
  border-color: var(--dh-navy);
  box-shadow: 0 0 0 3px rgba(243, 146, 53, 0.18);
}
.feat__form-submit {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.feat__form-submit small {
  font-size: var(--fs-12);
  color: var(--fg-2);
  max-width: 280px;
  line-height: 1.45;
}

/* Report-cover placeholder beside form on narrow screens; replaced by form on wide */
.feat__cover {
  display: none;
}

/* -----------------------------------------------------------
   Resource library
   ----------------------------------------------------------- */
.library { padding: 56px 0; }
@media (min-width: 768px) { .library { padding: 72px 0; } }
.library__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.library__head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--dh-navy);
  margin: var(--space-3) 0 0;
  line-height: 1.1;
}

.library__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--bg-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-7);
}
.library__tab {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.library__tab:hover { color: var(--dh-navy); }
@media (hover: hover) and (pointer: fine) {
  .library__tab:active { transform: scale(0.97); }
}
.library__tab.is-active {
  background: var(--dh-navy);
  color: #fff;
}
.library__tab .count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  background: rgba(25, 51, 89, 0.08);
  color: var(--fg-2);
}
.library__tab.is-active .count {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
}

.library__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .library__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .library__grid { grid-template-columns: repeat(3, 1fr); } }

.res-card {
  display: flex;
  flex-direction: column;
  background: var(--dh-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .res-card:hover {
    border-color: var(--dh-navy);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .res-card:active { transform: scale(0.99); }
}

.res-card__thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  background: var(--dh-navy);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.res-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><polygon points='30,1 59,17 59,35 30,51 1,35 1,17' fill='none' stroke='%23ffffff' stroke-width='0.4' stroke-opacity='0.1'/></svg>");
  background-size: 60px 52px;
  pointer-events: none;
}
.res-card__mark {
  position: relative;
  z-index: 1;
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.95);
  line-height: 1;
  letter-spacing: -0.04em;
  font-style: italic;
}
.res-card__mark .dot { color: var(--dh-orange); }

/* Type-specific accent strip & background variation */
.res-card[data-type="whitepaper"] .res-card__thumb { background: linear-gradient(135deg, #1B345B 0%, #0E1F39 100%); }
.res-card[data-type="webinar"] .res-card__thumb { background: linear-gradient(135deg, #244271 0%, #193359 100%); }
.res-card[data-type="blog"] .res-card__thumb { aspect-ratio: 16 / 6; background: linear-gradient(135deg, #C8D9EE 0%, #A8C0DE 100%); }
.res-card[data-type="blog"] .res-card__mark { font-size: 40px; }
.res-card[data-type="blog"] .res-card__thumb::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><polygon points='30,1 59,17 59,35 30,51 1,35 1,17' fill='none' stroke='%23193359' stroke-width='0.4' stroke-opacity='0.12'/></svg>");
}
.res-card[data-type="blog"] .res-card__type-strip {
  background: rgba(25,51,89,0.08);
  border-color: rgba(25,51,89,0.15);
  color: var(--dh-navy);
}

.res-card__type-strip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: #fff;
  border-radius: var(--radius-pill);
}
.res-card__type-strip .swatch {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.res-card[data-type="blog"] .swatch       { background: var(--dh-orange); }
.res-card[data-type="whitepaper"] .swatch { background: var(--dh-yellow); }
.res-card[data-type="webinar"] .swatch    { background: #6FD0FF; }

.res-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-5) var(--space-5);
  gap: var(--space-4);
}
.res-card__title {
  font-size: var(--fs-18);
  line-height: 1.3;
  color: var(--dh-navy);
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  flex: 1;
  text-wrap: pretty;
}
.res-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-12);
  color: var(--fg-2);
  letter-spacing: var(--tracking-wide);
}
.res-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--dh-orange);
}
@media (hover: hover) {
  .res-card:hover .res-card__cta { color: var(--link-hover); }
  .res-card:hover .res-card__cta .arrow { transform: translateX(4px); }
}
.res-card__cta .arrow { transition: transform var(--dur-base) var(--ease-out); }

.library__empty {
  display: none;
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--fg-2);
}
.library.is-empty .library__grid { display: none; }
.library.is-empty .library__empty { display: block; }

/* -----------------------------------------------------------
   Pillar content - 3 definition cards
   ----------------------------------------------------------- */
.pillar {
  background: var(--bg-3);
  padding: 56px 0;
  border-top: 1px solid var(--border-2);
}
@media (min-width: 768px) { .pillar { padding: 72px 0; } }
.pillar__head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.pillar__head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--dh-navy);
  margin: var(--space-3) 0 0;
  line-height: 1.1;
}

.pillar__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pillar__grid { grid-template-columns: repeat(3, 1fr); } }

.pillar__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--dh-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  position: relative;
}
@media (hover: hover) {
  .pillar__card:hover {
    border-color: var(--dh-yellow);
    box-shadow: 0 1px 0 var(--dh-yellow), var(--shadow-1);
    transform: translateY(-1px);
  }
}
.pillar__card .marker {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}
.pillar__card h3 {
  font-size: var(--fs-24);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--dh-navy);
  margin: 0;
  font-weight: var(--fw-bold);
}
.pillar__card p {
  font-size: var(--fs-16);
  color: var(--fg-2);
  margin: 0;
  line-height: 1.5;
}
.pillar__card .row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--dh-navy);
  margin-top: var(--space-3);
}
@media (hover: hover) {
  .pillar__card:hover .row { color: var(--dh-orange); }
  .pillar__card:hover .arrow { transform: translateX(4px); }
}
.pillar__card .arrow { transition: transform var(--dur-base) var(--ease-out); }

/* -----------------------------------------------------------
   Comparison pages block
   ----------------------------------------------------------- */
.compare {
  padding: 56px 0;
}
@media (min-width: 768px) { .compare { padding: 72px 0; } }
.compare__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.compare__head h3 {
  font-size: var(--fs-32);
  letter-spacing: -0.02em;
  color: var(--dh-navy);
  margin: 0;
}
.compare__head p {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--fg-2);
}

.compare__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .compare__grid { grid-template-columns: 1fr 1fr; } }

.compare__card {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  background: var(--dh-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .compare__card:hover { border-color: var(--dh-navy); transform: translateY(-1px); }
}

.compare__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compare__brand .lbl {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  font-weight: var(--fw-bold);
}
.compare__brand .name {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--dh-navy);
  letter-spacing: -0.01em;
}
.compare__brand--self .name {
  color: var(--dh-navy);
}
.compare__brand--self .name::after {
  content: " ";
}
.compare__vs {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}
.compare__card .arrow { color: var(--dh-orange); flex-shrink: 0; }