/* ROAS1000X kit kertas proof + plate kitab. Dipakai home (home.css bergantung pada fail ni)
   dan senarai course Tutor (tutor/archive-course.php). Token datang dari theme.css. */

.home .roas-main,
.home .roas-foot,
.post-type-archive-courses .roas-main,
.post-type-archive-courses .roas-foot { background: var(--paper-2); }

.hm {
  --hand: "Kalam", "Segoe Print", cursive;
  --hm-pad: 10px;
  --hm-mark: 28px;
  --hm-sec: 56px;
  --slip: 0 12px 26px -16px rgba(17, 17, 17, .38), 0 1px 2px rgba(17, 17, 17, .08);
  padding: 30px var(--gutter) 44px;
  color: var(--ink);
}

/* =========================================================
   KERTAS + TANDA CETAK
   ========================================================= */
.hm-sheet {
  position: relative;
  container-type: inline-size;
  max-width: 1120px;
  margin-inline: auto;
  padding: 24px var(--hm-pad) 26px;
}
.hm-crop {
  position: absolute;
  width: var(--hm-mark);
  height: var(--hm-mark);
  pointer-events: none;
}
.hm-crop::before,
.hm-crop::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.hm-crop::before { left: 0; right: 0; top: calc(50% - .5px); height: 1px; }
.hm-crop::after { top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; }
.hm-crop--tl { top: calc(var(--hm-mark) / -2); left: calc(var(--hm-mark) / -2); }
.hm-crop--tr { top: calc(var(--hm-mark) / -2); right: calc(var(--hm-mark) / -2); }
.hm-crop--bl { bottom: calc(var(--hm-mark) / -2); left: calc(var(--hm-mark) / -2); }
.hm-crop--br { bottom: calc(var(--hm-mark) / -2); right: calc(var(--hm-mark) / -2); }

.hm-reg {
  position: absolute;
  left: 50%;
  width: var(--hm-mark);
  height: var(--hm-mark);
  color: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
}
.hm-reg--top { top: calc(var(--hm-mark) / -2); }
.hm-reg--bottom { bottom: calc(var(--hm-mark) / -2); }
.hm-reg-svg { display: block; width: 100%; height: 100%; }

/* Bahagian: garis atas + tanda lipat pendek di luar tepi kertas */
.hm-sec {
  position: relative;
  margin-top: var(--hm-sec);
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}
.hm-sec::before,
.hm-sec::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10px;
  height: 1px;
  background: var(--ink);
}
.hm-sec::before { left: calc(-1 * var(--hm-pad) - 14px); }
.hm-sec::after { right: calc(-1 * var(--hm-pad) - 14px); }

.hm-h2 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 900;
  font-size: clamp(2.1rem, 11cqi, 4.5rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.hm-end {
  margin-top: 48px;
  border-top: 1px solid var(--ink);
}

/* =========================================================
   PLATE KITAB
   ========================================================= */
.hm-kitab { display: grid; align-items: start; }
.hm-kitab + .hm-kitab {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
}
.hm-img {
  position: relative;
  background: var(--night);
  box-shadow: 0 18px 30px -18px rgba(17, 17, 17, .55);
}
.hm-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hm-tag {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 6px 9px 4px;
  background: var(--paper);
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 900;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}
.hm-kitab-body { min-width: 0; padding-top: 18px; }
.hm-title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 900;
  font-size: clamp(2rem, 10cqi, 3.25rem);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.hm-line {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.hm-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 18px 0 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .84;
}
.hm-was {
  position: relative;
  font-variation-settings: "wdth" 70;
  font-size: 2rem;
  color: var(--ink);
  text-decoration: none;
}
.hm-was::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 46%;
  height: 4px;
  background: var(--red);
  transform: rotate(-7deg);
}
.hm-now {
  margin-top: 10px;
  font-variation-settings: "wdth" 66;
  font-size: clamp(4.25rem, 24cqi, 6rem);
  letter-spacing: -.02em;
  color: var(--red);
}

/* Butang hitam + petak merah anak panah */
.hm-go {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 560px;
  min-height: 64px;
  margin-top: 22px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: background .2s;
}
.hm-go-txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 76px 11px 16px;
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
}
.hm-go-ic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  background: var(--red);
  clip-path: inset(0 0 0 20px);
  transition: clip-path .35s var(--ease), background .2s;
}
.hm-go-ic .roas-ic { width: 28px; height: 28px; transition: transform .35s var(--ease); }
.hm-go:hover { background: #000; color: #fff; }
.hm-go:hover .hm-go-ic { clip-path: inset(0); }
.hm-go:hover .roas-ic { transform: translateX(4px); }
.hm-go:active .hm-go-ic { background: var(--red-deep); }
.hm-go:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* =========================================================
   SENARAI COURSE (/courses/)
   ========================================================= */
.cr-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  margin-bottom: 30px;
}
.cr-h1 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 62;
  font-weight: 900;
  font-size: 17cqi;
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.cr-lede { max-width: 46ch; }
.cr-lede p {
  margin: 0 0 .35em;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}
.cr-lede p:last-child { margin-bottom: 0; color: var(--ink-2); font-weight: 400; font-size: 1rem; }

.cr-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 6px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}
.cr-note {
  margin: 0;
  font-family: var(--hand);
  font-size: 1rem;
  line-height: 1.15;
  color: var(--red-deep);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.cr-note:nth-child(2) { transform: rotate(-1deg); }

.cr-list { padding-top: 26px; }

.cr-empty {
  padding: 36px 20px;
  border: 1px dashed var(--field);
  text-align: center;
}
.cr-empty-h {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 70;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.cr-empty p { margin: 12px 0 0; color: var(--ink-2); }
.cr-empty a { color: var(--ink); font-weight: 600; text-decoration-color: var(--red); }
.cr-empty a:hover { color: var(--red-deep); }

.cr-by {
  margin: 0;
  padding-top: 14px;
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-2);
}

/* =========================================================
   >= 600px
   ========================================================= */
@media (min-width: 600px) {
  .hm {
    --hm-pad: 20px;
    --hm-mark: 34px;
    --hm-sec: 80px;
    padding-top: 44px;
    padding-bottom: 64px;
  }
  .hm-sheet { padding-top: 36px; padding-bottom: 34px; }
  .hm-sec { padding-top: 34px; }
  .hm-h2 { margin-bottom: 30px; }
  .hm-kitab { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px; }
  .hm-kitab-body { padding-top: 0; }
  .hm-title { font-size: 2.4rem; }
  .hm-was { font-size: 2.4rem; }
  .hm-now { font-size: 5rem; }

  .cr-head { margin-bottom: 40px; }
  .cr-lede p { font-size: 1.35rem; }
  .cr-lede p:last-child { font-size: 1.0625rem; }
  .cr-note { font-size: 1.3rem; }
  .cr-list { padding-top: 34px; }
}

/* =========================================================
   >= 900px
   ========================================================= */
@media (min-width: 900px) {
  .hm {
    --hm-pad: 48px;
    --hm-mark: 40px;
    --hm-sec: 112px;
    padding-top: 64px;
    padding-bottom: 88px;
  }
  .hm-sheet { padding-top: 56px; padding-bottom: 44px; }
  .hm-sec { padding-top: 44px; }
  .hm-kitab { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; }
  .hm-title { font-size: clamp(2.4rem, 4.1cqi, 3.25rem); }
  .hm-was { font-size: 2.6rem; }
  .hm-now { font-size: 6rem; }
  .hm-go-txt { font-size: 1.6rem; }
  .hm-end { margin-top: 72px; }

  .cr-head {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "title notes"
      "lede  notes";
    column-gap: 48px;
    margin-bottom: 56px;
  }
  .cr-h1 { grid-area: title; font-size: min(calc((100cqi - 308px) / 5.6), 8rem); }
  .cr-lede { grid-area: lede; }
  .cr-lede p { font-size: 1.5rem; }
  .cr-notes {
    grid-area: notes;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    margin: 0;
    padding: 8px 0 8px 40px;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  .cr-note { font-size: 1.6rem; transform: rotate(-4deg); }
  .cr-note:nth-child(2) { transform: rotate(-2.5deg); }
  .cr-list { padding-top: 48px; }
  .cr-list .hm-kitab + .hm-kitab { margin-top: 56px; padding-top: 56px; }
  .cr-empty { padding: 72px 40px; }
  .cr-empty-h { font-size: 2.6rem; }
}

/* =========================================================
   MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hm-go:hover .hm-go-ic { clip-path: inset(0 0 0 20px); }
}