/* Japanese study plan sheet, reskinned to the zine / magazine theme.
   Everything is scoped under .japones. The wrapper uses column-span:all so the
   page's grids and tables break out of .magazine-content's newspaper columns
   and stay full width — no edits to the shared layout or global CSS needed. */

.japones {
  column-span: all;   /* break out of the magazine multi-column flow */
  text-align: left;   /* override .magazine-content's justify */
  color: #1a1a1a;
}

.japones p { color: #333; }

/* --- intro --- */
.japones .intro { max-width: 840px; margin-bottom: 28px; }
.japones .intro p { font-size: 1.05rem; }

/* --- pills (zine stickers) --- */
.japones .row { display: flex; flex-wrap: wrap; gap: 8px; }
.japones .pill {
  display: inline-flex; align-items: center;
  border: 2px solid #000; border-radius: 999px;
  padding: 3px 12px; background: #fff; color: #1a1a1a;
  font-size: 0.82rem; font-weight: 700;
}
.japones .pill.success { background: #00f3ff; }              /* cyan    */
.japones .pill.info    { background: #ff2d95; color: #fff; } /* magenta */
.japones .pill.warning { background: #f0a830; }              /* orange  */

/* --- shared zine card look: black border + hard offset shadow --- */
.japones .stat,
.japones .card,
.japones .callout,
.japones .sumario {
  border: 2px solid #000;
  background: #fff;
  box-shadow: 4px 4px 0 #000;
}

/* --- stats grid --- */
.japones .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.japones .stat { padding: 16px; }
.japones .stat strong { display: block; margin-bottom: 2px; font-size: 1.6rem; line-height: 1.1; font-family: 'Ethnocentric', sans-serif; }
.japones .stat span { color: #555; font-size: 0.9rem; }

/* --- sumario: the jump-to-a-week index --- */
.japones .sumario { padding: 16px 18px; margin: 28px 0; background: #f4f0e6; }
.japones .sumario h2 { margin: 0 0 12px; font-size: 1.1rem; }
.japones .sumario ol { margin: 0; padding-left: 22px; }
.japones .sumario li { margin-bottom: 8px; }
.japones .sumario a { font-weight: 700; }
.japones .sumario .quando { color: #555; font-size: 0.86rem; }
.japones .sumario .atalhos {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 2px solid #000;
  font-size: 0.9rem;
}

/* --- callout --- */
.japones .callout { padding: 16px 18px; margin: 24px 0; background: #f4f0e6; }
.japones .callout strong { display: block; margin-bottom: 4px; color: #ff2d95; }
.japones .callout p { margin: 0; }

/* --- weeks: stacked phase cards --- */
.japones .fases { display: grid; gap: 20px; }
.japones .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 2px solid #000;
  background: #00f3ff;
  font-weight: 800; font-family: 'Ethnocentric', sans-serif; font-size: 0.95rem;
}
.japones .card-body { padding: 16px; }
.japones .block { margin-top: 14px; }
.japones .block:first-of-type { margin-top: 8px; }
.japones h3 { font-size: 1rem; margin: 0 0 10px; }

.japones ul { margin: 8px 0 0; padding-left: 20px; }
.japones li { margin-bottom: 6px; }

/* --- resource links: the tap targets that open the actual podcast/course --- */
.japones ul.links { list-style: none; padding-left: 0; }
.japones ul.links li { margin-bottom: 10px; }
.japones ul.links a {
  font-weight: 700;
  border-bottom: 2px solid #ff2d95;
  text-decoration: none;
}
.japones ul.links a:hover { background: #ff2d95; color: #fff; }
.japones .onde {
  display: block;
  color: #555; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Secondary ways to reach the same resource (feed, direct download, store). */
.japones .extras {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px;
  font-size: 0.8rem;
}
.japones .extras a { font-weight: 400; border-bottom: 1px solid #999; }
.japones .extras a::after { content: none; }

/* External links get a marker so it's obvious they leave the page. */
.japones a[target="_blank"]::after {
  content: "\2197";              /* ↗ */
  margin-left: 2px;
  font-size: 0.78em;
  vertical-align: super;
  line-height: 0;
}

/* --- tables --- */
.japones table { width: 100%; border-collapse: collapse; border: 2px solid #000; background: #fff; margin-top: 8px; box-shadow: 4px 4px 0 #000; }
.japones th, .japones td { padding: 12px; border-bottom: 1px solid #000; text-align: left; vertical-align: top; }
.japones thead th { background: #ff2d95; color: #fff; font-size: 0.86rem; }
.japones tbody tr:nth-child(even) { background: #f4f0e6; }
.japones tr:last-child td { border-bottom: 0; }

/* --- anchored sections clear the page top when jumped to from the sumario --- */
.japones [id] { scroll-margin-top: 20px; }

/* --- responsive: collapse grids to one column --- */
@media (max-width: 900px) {
  .japones .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The resource tables are wider than a phone; let them scroll inside their own
     box instead of pushing the whole page sideways. */
  .japones table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}