/* ==========================================================================
   MyRoomTool Blog — Foundation
   Base interface layer. Components must use only these tokens and utilities.
   Source of truth: docs/design-system.md
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap");

/* --------------------------------------------------------------------------
   1. CSS variables
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-bg: #fefdfa;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f1ec;
  --color-text: #223245;
  --color-text-muted: #79818a;
  --color-accent: #f93e22;
  --color-link: #f93e22;
  --color-divider: rgba(34, 50, 69, 0.14);
  --color-border: #e4e2dc;
  --color-on-accent: #ffffff;
  --color-on-secondary: #ffffff;
  --color-secondary: #223245;
  --color-secondary-hover: #162232;
  --color-accent-hover: #e0351c;

  /* Typography — families */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Carlito", "Calibri", system-ui, sans-serif;

  /* Typography — sizes (desktop) */
  --text-h1-size: 50px;
  --text-h2-size: 30px;
  --text-h3-size: 24px;
  --text-h4-size: 18px;
  --text-h5-size: 16px;
  --text-h6-size: 14px;
  --text-h7-size: 12px;
  --text-h8-size: 12px;
  --text-h9-size: 10px;

  /* Typography — weights */
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;

  /* Typography — line heights (per level; smaller type → slightly more open) */
  --text-h1-leading: 1.12;
  --text-h2-leading: 1.18;
  --text-h3-leading: 1.22;
  --text-h4-leading: 1.28;
  --text-h5-leading: 1.34;
  --text-h6-leading: 1.42;
  --text-h7-leading: 1.46;
  --text-h8-leading: 1.46;
  --text-h9-leading: 1.50;

  /* Legacy aliases (map to nearest body/heading leadings) */
  --leading-tight: var(--text-h1-leading);
  --leading-snug: var(--text-h4-leading);
  --leading-normal: var(--text-h6-leading);
  --leading-relaxed: var(--text-h9-leading);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;

  /* Shadows (light only) */
  --shadow-none: none;
  --shadow-soft: 0 2px 8px -1px rgba(34, 50, 69, 0.13);
  --shadow-dropdown: 0 8px 24px rgba(34, 50, 69, 0.1);
  /* Shared card elevation — D1, D2, TOC, A1 */
  --shadow-card: var(--shadow-soft);

  /* Containers */
  --container-max: 1120px;
  --container-reading: 720px;
  --container-pad-x: var(--space-l);
  --container-pad-x-mobile: var(--space-m);

  /* Spacing scale */
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 20px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;

  /* Special: TOC sticker overlap (Brand Guide) */
  --toc-overlap: 24px;

  /* Horizontal divider rhythm — equal space above/below the line.
     Min of distances previously used around .divider (space-l / space-xl). */
  --divider-gap: var(--space-l);

  /* Aspect ratios */
  --ratio-hero-article: 21 / 9;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* Motion */
  --ease-standard: ease;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
}

/* --------------------------------------------------------------------------
   2. Global reset / base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-h6-size);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

figure {
  margin: 0;
}

figcaption {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-weight: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background-color: rgba(249, 62, 34, 0.15);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   3. Typography — universal H1–H9 classes
   -------------------------------------------------------------------------- */

.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--font-bold);
  line-height: var(--text-h1-leading);
  color: var(--color-text);
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-bold);
  line-height: var(--text-h2-leading);
  color: var(--color-text);
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-semibold);
  line-height: var(--text-h3-leading);
  color: var(--color-text);
}

.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--font-semibold);
  line-height: var(--text-h4-leading);
  color: var(--color-text);
}

.text-h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5-size);
  font-weight: var(--font-bold);
  line-height: var(--text-h5-leading);
  color: var(--color-text);
}

.text-h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6-size);
  font-weight: var(--font-regular);
  line-height: var(--text-h6-leading);
  color: var(--color-text);
}

.text-h7 {
  font-family: var(--font-body);
  font-size: var(--text-h7-size);
  font-weight: var(--font-regular);
  line-height: var(--text-h7-leading);
  color: var(--color-text);
}

.text-h8 {
  font-family: var(--font-body);
  font-size: var(--text-h8-size);
  font-weight: var(--font-regular);
  line-height: var(--text-h8-leading);
  color: var(--color-link);
}

.text-h9 {
  font-family: var(--font-body);
  font-size: var(--text-h9-size);
  font-weight: var(--font-regular);
  line-height: var(--text-h9-leading);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Container
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.container--reading {
  max-width: var(--container-reading);
}

.container--full {
  max-width: none;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   5. Base grid (layout utilities only — no components)
   -------------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.stack--s {
  gap: var(--space-s);
}

.stack--l {
  gap: var(--space-l);
}

.stack--xl {
  gap: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.grid {
  display: grid;
  gap: var(--space-m);
  width: 100%;
}

.grid--gap-s {
  gap: var(--space-s);
}

.grid--gap-l {
  gap: var(--space-l);
}

.grid--1 {
  grid-template-columns: 1fr;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--gallery-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--gallery-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   6. Images
   -------------------------------------------------------------------------- */

.img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.img--contain {
  object-fit: contain;
}

.img--hero-article {
  aspect-ratio: var(--ratio-hero-article);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.img--square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.img--plain {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   7. Links
   -------------------------------------------------------------------------- */

a.link,
.link {
  font-family: var(--font-body);
  font-size: var(--text-h8-size);
  font-weight: var(--font-regular);
  line-height: var(--text-h8-leading);
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

a.link:hover,
.link:hover {
  opacity: 0.85;
}

a.link:active,
.link:active {
  opacity: 0.7;
}

/* Inline article links inherit H8 role when marked */
p a,
li a,
.text-h6 a,
.text-h7 a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

p a:hover,
li a:hover,
.text-h6 a:hover,
.text-h7 a:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   8. Buttons (base classes only)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  line-height: var(--text-h7-leading);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
  opacity: 0.9;
}

.btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.15);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-hover);
}

.btn--text {
  background-color: transparent;
  color: var(--color-accent);
  border-radius: 0;
  padding-inline: 0;
}

.btn--text:hover:not(:disabled) {
  opacity: 0.85;
}

.btn--lg {
  padding: 14px 32px;
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-leading);
}

.btn--md {
  padding: 12px 24px;
  font-size: var(--text-h7-size);
  line-height: var(--text-h7-leading);
}

.btn--sm {
  padding: 8px 16px;
  font-size: var(--text-h9-size);
  line-height: var(--text-h9-leading);
}

/* --------------------------------------------------------------------------
   9. Divider
   -------------------------------------------------------------------------- */

.divider {
  display: block;
  width: 100%;
  height: 0;
  margin-block: var(--divider-gap);
  border: 0;
  border-top: 1px solid var(--color-divider);
}

/* Flush under Header — same Header→line rhythm as the listing page */
.divider--tight {
  margin-top: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Layout Framework
   Page shell only. No Header / Footer / Hero component styles.
   -------------------------------------------------------------------------- */

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.layout > header,
.layout > footer {
  width: 100%;
  flex-shrink: 0;
}

.layout__main {
  flex: 1 0 auto;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Site listing (Preview → C1 cards on homepage)
   -------------------------------------------------------------------------- */

.site-listing {
  padding-block: var(--space-xxl);
}

.site-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  align-items: stretch;
  width: 100%;
}

.site-listing__grid > .block-c1 {
  height: 100%;
}

.site-listing__grid:empty {
  display: none;
}

.site-listing__empty {
  margin: 0;
  color: var(--color-text-muted);
}

.site-listing__empty[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .site-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .site-listing__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Foundation responsive adjustments (desktop-first)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    /* Mobile type scale — compact leadings (absolute gap shrinks with size). */
    --text-h1-size: 34px;
    --text-h2-size: 24px;
    --text-h3-size: 20px;
    --text-h4-size: 17px;
    --text-h5-size: 15px;
    --text-h6-size: 14px;
    --text-h7-size: 12px;
    --text-h8-size: 12px;
    --text-h9-size: 10px;
    --text-h1-leading: 1.14;
    --text-h2-leading: 1.18;
    --text-h3-leading: 1.22;
    --text-h4-leading: 1.26;
    --text-h5-leading: 1.30;
    --text-h6-leading: 1.36;
    --text-h7-leading: 1.38;
    --text-h8-leading: 1.38;
    --text-h9-leading: 1.40;
    --container-pad-x: var(--container-pad-x-mobile);
    --space-xl: 40px;
    --space-xxl: 48px;
    --divider-gap: var(--space-m);
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--gallery-2,
  .grid--gallery-3 {
    grid-template-columns: 1fr;
  }
}