/* Home page sections (PLANEAMENTO §6) — Inicio.dc.html / M-Inicio.dc.html. Base hero, section and category card
   styles live in site.css; this file adds the carousel, the product grid, the story block and the preview tags. */

/* ---------- Hero carousel ---------- */
.cm-hero--carousel { min-height: 0; }
.cm-hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cm-hero__track::-webkit-scrollbar { display: none; }
.cm-hero__track:focus-visible { outline: 2px solid var(--cm-text); outline-offset: -4px; }
.cm-hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  background: var(--cm-bg-2);
}
.cm-hero__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cm-space-3);
  padding-block: 0 var(--cm-space-6);
}
.cm-hero__arrow {
  width: var(--cm-hit);
  height: var(--cm-hit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cm-line-field);
  border-radius: 50%;
  background: rgba(255, 250, 251, .85);
  color: var(--cm-text);
  cursor: pointer;
}
.cm-hero__arrow:hover { background: var(--cm-surface); }
.cm-hero__dots { display: flex; gap: 2px; }
/* 44 px targets with the small bar drawn inside */
.cm-hero__dot {
  width: 32px;
  height: var(--cm-hit);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.cm-hero__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--cm-line-field);
  transform: translate(-50%, -50%);
  transition: width var(--cm-dur-fast) var(--cm-ease), background-color var(--cm-dur-fast) var(--cm-ease);
}
.cm-hero__dot[aria-current="true"]::before { width: 28px; background: var(--cm-text); }
.cm-hero__toggle .cm-hero__play-icon { display: none; }
.cm-hero__toggle.is-paused .cm-hero__play-icon { display: block; }
.cm-hero__toggle.is-paused .cm-hero__pause-icon { display: none; }

@media (min-width: 48em) {
  .cm-hero--carousel { position: relative; }
  .cm-hero__slide { min-height: 640px; }
  .cm-hero__slide .cm-hero__content { padding-bottom: 160px; }
  .cm-hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--cm-space-16);
    justify-content: flex-start;
    padding-block: 0;
    pointer-events: none;
  }
  .cm-hero__controls > * { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-hero__dot::before { transition: none; }
}

/* ---------- Section heading ---------- */
.cm-section__titles { display: flex; flex-direction: column; gap: var(--cm-space-2); }
.cm-section__link {
  min-height: var(--cm-hit);
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  text-underline-offset: 4px;
}

/* ---------- Product grids ---------- */
.cm-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .cm-home-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px 24px; }
}

/* ---------- Story / rich text ---------- */
.cm-story {
  display: grid;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cm-text);
  color: #FFF3E3;
}
.cm-story__media { width: 100%; height: 200px; object-fit: cover; }
.cm-story__body { display: flex; flex-direction: column; gap: var(--cm-space-3); padding: var(--cm-space-6); }
.cm-story__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cm-accent); /* mustard on plum: 8:1 */
}
.cm-story__title { font-size: clamp(1.625rem, 3vw, 2.75rem); line-height: 1.15; letter-spacing: -.01em; color: inherit; }
.cm-story__text { max-width: 460px; font-size: 17px; line-height: 1.7; color: #E2D7F2; }
.cm-story__text a { color: #FFF3E3; }
.cm-story__text > * + * { margin-top: var(--cm-space-3); }
.cm-story__link {
  align-self: flex-start;
  margin-top: var(--cm-space-2);
  border: 1px solid #FFF3E3;
  background: transparent;
  color: #FFF3E3;
}
.cm-story__link:hover { background: #FFF3E3; color: var(--cm-text); }
.cm-story :focus-visible { outline-color: #FFF3E3; }

@media (min-width: 48em) {
  .cm-story { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
  .cm-story__media { height: 100%; min-height: 420px; }
  .cm-story__body { justify-content: center; gap: 20px; padding: 64px 56px; }
}

/* ---------- Backoffice preview ---------- */
.cm-home-preview-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cm-space-2);
  margin-top: var(--cm-space-6);
  margin-bottom: calc(-1 * var(--cm-space-4));
  font-size: var(--cm-fs-small);
  color: var(--cm-text-2);
}
.cm-home-preview-tag a { min-height: var(--cm-hit); display: inline-flex; align-items: center; }
.cm-home-preview-tag__state {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--cm-radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--cm-status-delivered-bg);
  color: var(--cm-status-delivered);
}
.cm-home-preview-tag__state--inactive { background: var(--cm-line); color: var(--cm-text-3); }
.cm-home-preview-tag__state--scheduled,
.cm-home-preview-tag__state--expired { background: var(--cm-status-pending-bg); color: var(--cm-status-pending); }
.cm-home-preview-empty {
  margin-top: var(--cm-space-6);
  padding: var(--cm-space-4);
  border: 1px dashed var(--cm-line-field);
  border-radius: var(--cm-radius-card);
  color: var(--cm-text-2);
}
.cm-home-preview-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cm-text);
  color: var(--cm-bg);
}
.cm-home-preview-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cm-space-3) var(--cm-space-4);
  padding-block: var(--cm-space-3);
}
.cm-home-preview-bar__title { font-weight: 600; margin-right: auto; align-self: center; }
.cm-home-preview-bar label { display: flex; flex-direction: column; gap: 4px; font-size: var(--cm-fs-small); }
.cm-home-preview-bar .cm-check-inline { flex-direction: row; align-items: center; min-height: var(--cm-hit); }
.cm-home-preview-bar input[type="date"] { height: var(--cm-hit); padding: 0 10px; border-radius: var(--cm-radius-field); border: 1px solid var(--cm-line-field); font: inherit; color: var(--cm-text); }
.cm-home-preview-bar input[type="checkbox"] { width: 20px; height: 20px; }
.cm-home-preview-bar a { color: var(--cm-bg); min-height: var(--cm-hit); display: inline-flex; align-items: center; }
.cm-home-preview-bar :focus-visible { outline: 2px solid var(--cm-bg); outline-offset: 2px; }