/* Homepage (page 1): destaques pill bar, hero carousel + colored featured cards,
   tool hubs grid tweaks and margin decorations. Wider shell comes from body.is-home in head.html. */

/* ---------- Page background ---------- */
body.is-home .site-main {
  background:
    radial-gradient(circle at -4% 34%, rgba(214, 228, 255, .75) 0, rgba(214, 228, 255, 0) 17%),
    radial-gradient(circle at 104% 12%, rgba(214, 228, 255, .6) 0, rgba(214, 228, 255, 0) 12%),
    #f8faff;
}

html[data-theme="dark"] body.is-home .site-main {
  background: var(--dica-surface);
}

/* ---------- Featured: hero carousel + 4 colored cards ---------- */
.hm-feat {
  max-width: var(--dica-shell, 1200px);
  margin: 22px auto 0;
  padding: 0 var(--dica-gutter, 24px);
  box-sizing: border-box;
}

.hm-feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
  /* Fixed rows: long titles/descriptions are clamped instead of stretching the block */
  grid-template-rows: repeat(2, 192px);
  gap: 16px;
}

.hm-hero {
  position: relative;
  grid-row: 1 / span 2;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 207, 51, .9) 0, rgba(255, 207, 51, 0) 42%),
    linear-gradient(115deg, #fff8dc 0%, #ffefb0 50%, #ffe07a 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.hm-hero-track {
  display: grid;
  height: 100%;
}

.hm-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 24px 26px 40px 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

.hm-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  background: var(--dica-brand, #f5c400);
  color: #111;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hm-hero-badge svg {
  width: 16px;
  height: 16px;
  max-width: none;
}

.hm-hero-title {
  display: -webkit-box;
  margin: 18px 0 12px;
  overflow: hidden;
  color: #0f1b3d;
  font-size: clamp(28px, 2.1vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hm-hero-title a {
  color: inherit;
  text-decoration: none;
}

.hm-hero-desc {
  display: -webkit-box;
  max-width: 340px;
  margin: 0 0 22px;
  overflow: hidden;
  color: #334155;
  font-size: 17px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hm-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--dica-brand, #f5c400);
  box-shadow: 0 8px 18px rgba(214, 160, 0, .28);
  color: #111 !important;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hm-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(214, 160, 0, .36);
}

.hm-hero-art {
  position: relative;
}

.hm-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 70% center;
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: 0 22px 44px rgba(15, 23, 42, .2);
  transform: rotate(-2deg);
}

.hm-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.hm-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}

.hm-dot.is-active {
  background: var(--dica-brand, #f5c400);
  transform: scale(1.35);
}

/* Colored cards */
.hm-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-height: 0;
  padding: 18px 16px 58px 22px;
  overflow: hidden;
  border-radius: 20px;
  box-sizing: border-box;
  color: #0f1b3d;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  color: inherit;
}

.hm-card-text {
  display: flex;
  flex: 1 1 54%;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hm-card-badge {
  flex: none;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dica-brand, #f5c400);
  color: #111;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hm-card-title {
  display: -webkit-box;
  flex: none;
  margin: 0 0 6px;
  overflow: hidden;
  color: inherit;
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.4px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hm-card-desc {
  display: -webkit-box;
  flex: none;
  margin-bottom: 8px;
  overflow: hidden;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Pinned to the corner so clamped text can never push it out of the card */
.hm-card-go {
  position: absolute;
  left: 22px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
}

.hm-card-go svg {
  width: 16px;
  height: 16px;
  max-width: none;
}

.hm-card-art {
  flex: 0 0 44%;
  max-width: 146px;
  align-self: center;
  margin-bottom: -42px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 146px;
  border: 4px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.hm-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* Covers carry headline text on the left; zoom toward the illustration on the right */
  transform: scale(1.14);
  transform-origin: 88% 50%;
}

.hm-card--navy {
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .45) 0, rgba(59, 130, 246, 0) 55%),
    linear-gradient(135deg, #0e2466 0%, #1a3a9c 100%);
  color: #fff;
}

.hm-card--navy .hm-card-desc {
  color: rgba(255, 255, 255, .85);
}

.hm-card--navy .hm-card-go {
  background: #fff;
  color: #1a3a9c;
}

.hm-card--peach {
  background: linear-gradient(135deg, #fff3e6 0%, #ffd9b8 100%);
}

.hm-card--peach .hm-card-go {
  background: #c2551a;
}

.hm-card--lilac {
  background: linear-gradient(135deg, #f3f0ff 0%, #ddd5ff 100%);
}

.hm-card--lilac .hm-card-go {
  background: #6b5bd6;
}

.hm-card--mint {
  background: linear-gradient(135deg, #ecfbf3 0%, #c8f0da 100%);
}

.hm-card--mint .hm-card-go {
  background: #16a34a;
}

/* Dark mode: same colour identity, dark surfaces (hero + the four cards) */
html[data-theme="dark"] .hm-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(245, 196, 0, .22) 0, rgba(245, 196, 0, 0) 45%),
    linear-gradient(115deg, #2a2512 0%, #35301a 55%, #41381c 100%);
  box-shadow: none;
}

html[data-theme="dark"] .hm-hero-title {
  color: var(--dica-ink);
}

html[data-theme="dark"] .hm-hero-desc {
  color: var(--dica-body);
}

html[data-theme="dark"] .hm-hero-art img,
html[data-theme="dark"] .hm-card-art {
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .hm-dot {
  background: rgba(255, 255, 255, .45);
}

html[data-theme="dark"] .hm-dot.is-active {
  background: var(--dica-brand);
}

html[data-theme="dark"] .hm-card {
  color: #f1f5f9;
}

html[data-theme="dark"] .hm-card-desc {
  color: rgba(226, 232, 240, .78);
}

html[data-theme="dark"] .hm-card--navy {
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .28) 0, rgba(59, 130, 246, 0) 55%),
    linear-gradient(135deg, #0d1a3d 0%, #16295e 100%);
}

html[data-theme="dark"] .hm-card--peach {
  background: linear-gradient(135deg, #33210f 0%, #4a2f15 100%);
}

html[data-theme="dark"] .hm-card--lilac {
  background: linear-gradient(135deg, #201b38 0%, #2e2650 100%);
}

html[data-theme="dark"] .hm-card--mint {
  background: linear-gradient(135deg, #10291c 0%, #163a28 100%);
}

/* ---------- Tool hubs grid (home) ---------- */
.hm-tools {
  position: relative;
}

body.is-home .tools-discovery.is-home-hubs {
  margin-top: 4px;
}

/* Section head as a banner: title | lead + link | illustration | handwritten note */
body.is-home .tools-discovery-head.td-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) 300px auto;
  align-items: center;
  gap: 28px;
  min-height: 132px;
  margin-bottom: 22px;
  padding: 22px 36px 22px 60px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(100deg, #edf3fd 0%, #e5edfa 60%, #dce7f8 100%);
}

.td-banner-bar {
  display: block;
  width: 54px;
  height: 5px;
  margin-bottom: 12px;
  border-radius: 3px;
  background: var(--dica-brand, #f5c400);
}

body.is-home .td-banner .tools-discovery-title {
  display: block;
  color: #0f1b3d;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.12;
  letter-spacing: -.5px;
  text-wrap: balance;
}

.td-banner-lead {
  padding-left: 28px;
  border-left: 1px solid #c8d5ea;
}

body.is-home .td-banner .tools-discovery-lead {
  max-width: 380px;
  margin: 0;
  color: #475569;
  font-size: 16.5px;
  line-height: 1.5;
}

body.is-home .td-banner .tools-discovery-all {
  display: inline-block;
  margin-top: 8px;
  color: #1f6fe5;
  font-size: .95rem;
}

.td-banner-art {
  align-self: end;
  margin-bottom: -24px;
}

.td-banner-art svg {
  display: block;
  width: 300px;
  height: auto;
  max-width: none;
}

.td-banner-note {
  margin: 0;
  color: #0f1b3d;
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-10deg);
}

.td-banner-note svg {
  display: block;
  width: 116px;
  height: 14px;
  margin: 2px auto 0;
  color: var(--dica-brand, #f5c400);
}

html[data-theme="dark"] body.is-home .tools-discovery-head.td-banner {
  background: var(--dica-surface-raised);
}

html[data-theme="dark"] body.is-home .td-banner .tools-discovery-title,
html[data-theme="dark"] .td-banner-note {
  color: var(--dica-ink);
}

html[data-theme="dark"] body.is-home .td-banner .tools-discovery-lead {
  color: var(--dica-muted);
}

html[data-theme="dark"] .td-banner-lead {
  border-left-color: var(--dica-border);
}

@media (max-width: 1300px) {
  body.is-home .tools-discovery-head.td-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 260px;
    padding-left: 40px;
  }

  .td-banner-art svg {
    width: 260px;
  }

  .td-banner-note {
    display: none;
  }
}

@media (max-width: 980px) {
  body.is-home .tools-discovery-head.td-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 24px 28px;
  }

  .td-banner-art {
    display: none;
  }
}

@media (max-width: 680px) {
  body.is-home .tools-discovery-head.td-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 20px;
    border-radius: 16px;
  }

  .td-banner-lead {
    padding-left: 0;
    border-left: 0;
  }

  body.is-home .td-banner .tools-discovery-lead {
    font-size: 15px;
  }
}

body.is-home .tools-discovery.is-home-hubs a.td-card {
  gap: 20px;
  padding: 22px 22px 18px;
}

body.is-home .tools-discovery.is-home-hubs .td-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

body.is-home .tools-discovery.is-home-hubs .td-badge svg {
  width: 30px;
  height: 30px;
}

body.is-home .tools-discovery.is-home-hubs .td-title {
  font-size: 1.12rem;
  color: #0f1b3d;
}

body.is-home .tools-discovery.is-home-hubs .td-desc {
  color: #475569;
  font-size: .95rem;
}

body.is-home .tools-discovery.is-home-hubs .td-go {
  color: #1f6fe5;
  font-size: .95rem;
}

html[data-theme="dark"] body.is-home .tools-discovery-title,
html[data-theme="dark"] body.is-home .tools-discovery.is-home-hubs .td-title {
  color: var(--dica-ink);
}

html[data-theme="dark"] body.is-home .tools-discovery.is-home-hubs .td-desc {
  color: var(--dica-muted);
}

html[data-theme="dark"] body.is-home .tools-discovery-all,
html[data-theme="dark"] body.is-home .tools-discovery.is-home-hubs .td-go {
  color: var(--dica-action);
}

/* Margin decorations (only where there is room outside the shell) */
.hm-deco-dots {
  display: none;
}

@media (min-width: 1660px) {
  .hm-deco-dots {
    position: absolute;
    left: -112px;
    bottom: 30px;
    display: block;
    width: 74px;
    height: 74px;
    background-image: radial-gradient(#b8c6e3 2.2px, transparent 2.8px);
    background-size: 18.5px 18.5px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hm-feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: 192px;
  }

  .hm-hero {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  /* Mobile: only the main destaque, text only - saves a screen of scrolling */
  .hm-card,
  .hm-hero-art {
    display: none;
  }

  .hm-feat {
    margin-top: 14px;
    padding: 0 16px;
  }

  .hm-feat-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }

  .hm-hero {
    border-radius: 18px;
  }

  .hm-slide {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px 38px;
  }

  .hm-hero-badge {
    padding: 4px 11px 4px 9px;
    font-size: 11.5px;
  }

  .hm-hero-title {
    margin: 12px 0 8px;
    font-size: 26px;
  }

  .hm-hero-desc {
    margin-bottom: 16px;
    font-size: 15px;
    -webkit-line-clamp: 2;
  }

  .hm-hero-cta {
    padding: 11px 20px;
    font-size: 15px;
  }

  .hm-dots {
    bottom: 14px;
  }

  .hm-hero-art {
    max-width: 360px;
  }

  .hm-card {
    min-height: 160px;
  }

  .hm-card-title {
    font-size: 20px;
  }

  .hm-card-art {
    flex-basis: 38%;
    max-width: 124px;
    max-height: 124px;
  }

  body.is-home .tools-discovery.is-home-hubs .td-badge {
    width: 52px;
    height: 52px;
  }
}