/* style.css */
article {
  --grid-unit: 4px;
  
  /* Responsive base-unit rules based on 4px grid */
  --base-unit: calc(var(--grid-unit) * 2); /* 8px for Mobile */
  --font-size-default: calc(var(--base-unit) * 1.5); /* 1.5x on Mobile = 12px */
  
  @media (min-width: 768px) {
    --base-unit: calc(var(--grid-unit) * 4); /* 16px for Tablet */
    --font-size-default: calc(var(--base-unit) * 1); /* 1x on Tablet = 16px */
  }
  
  @media (min-width: 1024px) {
    --base-unit: calc(var(--grid-unit) * 5); /* 20px for Desktop */
    --font-size-default: calc(var(--base-unit) * 1); /* 1x on Desktop = 20px */
  }
  
  /* Color palette - standard semantic defaults */
  --color-foreground: #1d1d1f;
  --color-background: #ffffff;
  --color-primary: #0066cc;
  --color-border: #d2d2d7;
  --color-muted: #86868b;
  --color-secondary-bg: #f5f5f7;
  --color-tertiary: #ff5e00; /* Tertiary/Alert color */
  
  /* 12-Column Grid Layout - article itself is 100% width, side columns act as padding */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--base-unit);
  width: 100%;
  
  /* Basic typography & body styles */
  font-family: 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-size-default);
  font-weight: 400;
  line-height: 140%; /* Set default line-height here (propagates naturally via inheritance) */
  color: var(--color-foreground);
  background-color: var(--color-background);
  box-sizing: border-box;
  
  * {
    box-sizing: border-box;
  }
  
  /* Default grid column mapping for all child elements */
  > * {
    grid-column: 2 / 12; /* Mobile default: 1 col empty on each side (10 cols wide) */
    margin-top: calc(var(--base-unit) * 2); /* Default margin-top is 2x */
    margin-bottom: calc(var(--base-unit) * 2); /* Default margin-bottom is 2x */
    
    @media (min-width: 768px) {
      grid-column: 3 / 11; /* Tablet: 2 cols empty on each side (8 cols wide) */
    }
    
    @media (min-width: 1024px) {
      grid-column: 4 / 10; /* Desktop: 3 cols empty on each side (6 cols wide) */
    }
  }
  
  /* TODO: 可以在此處加入客製化網頁樣板元件的樣式規則 */
  
  /* Markdown Standard Elements */
  h1, h2, h3, h4, h5 {
    line-height: 100%; /* Headers are 100% except h6 which inherits 140% */
  }

  h1 {
    font-size: calc(var(--base-unit) * 5);
    margin-bottom: calc(var(--base-unit) * 5);
    font-weight: normal;
  }
  
  h2 {
    font-size: calc(var(--base-unit) * 4); /* Desktop: 80px, Mobile: 32px */
    margin-top: calc(var(--base-unit) * 10); /* Desktop: 200px, Mobile: 80px */
    margin-bottom: calc(var(--base-unit) * 5); /* Desktop: 100px, Mobile: 40px */
    font-weight: normal;
    
    @media (max-width: 767px) {
      margin-bottom: calc(var(--base-unit) * 2); /* Spacing below h2 on Mobile is 2x (16px) */
    }
  }
  
  h3 {
    font-size: calc(var(--base-unit) * 3); /* Desktop: 60px, Mobile: 24px */
    margin-top: calc(var(--base-unit) * 4); /* Desktop: 80px, Mobile: 32px */
    margin-bottom: calc(var(--base-unit) * 4); /* Desktop: 80px, Mobile: 32px */
    font-weight: normal;
  }

  h4 {
    font-size: calc(var(--base-unit) * 2.5); /* Desktop: 50px */
    font-weight: normal;
  }

  h5 {
    font-size: calc(var(--base-unit) * 2); /* Desktop: 40px */
    font-weight: normal;
  }

  h6 {
    font-size: var(--font-size-default); /* Matches body font size responsive scaling */
    font-weight: bold; /* h6 is bold */
  }
  
  p {
    font-size: var(--font-size-default); /* Desktop: 20px (1x), Mobile: 12px (1.5x) */
    line-height: 140%;
    margin-bottom: calc(var(--base-unit) * 2); /* Desktop: 40px, Mobile: 16px */
    
    strong, &.weight-bold {
      font-weight: 700;
    }
  }
  
  a {
    color: inherit;
    text-decoration: none;
    opacity: 0.5;
    
    &:hover {
      opacity: 1;
      color: var(--color-tertiary);
    }
    
    &:active {
      opacity: 0.25;
    }
  }
  
  blockquote {
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(var(--base-unit) * 2);
    margin-bottom: calc(var(--base-unit) * 2);
    padding: calc(var(--base-unit) * 2);
    border: calc(var(--base-unit) * 0.1) solid var(--color-border);
    border-radius: calc(var(--base-unit) * 2);
    background-color: transparent; /* Empty background */
    color: var(--color-muted);
    
    p {
      margin-top: 0;
      margin-bottom: 0;
      &:not(:last-child) {
        margin-bottom: calc(var(--base-unit) * 1);
      }
    }
  }
  
  ul, ol {
    margin-bottom: calc(var(--base-unit) * 2);
    padding-left: calc(var(--base-unit) * 1.5);
    
    li {
      margin-bottom: calc(var(--base-unit) * 1);
      font-size: var(--font-size-default); /* Matches default text size scaling */
    }
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: calc(var(--base-unit) * 2);
    font-size: calc(var(--base-unit) * 0.9);
    
    th, td {
      border: 1px solid var(--color-border);
      padding: calc(var(--base-unit) * 0.5) calc(var(--base-unit) * 0.8);
      text-align: left;
    }
    
    th {
      background-color: var(--color-secondary-bg);
      font-weight: 600;
    }
  }
  
  pre {
    background-color: #000000;
    color: #ffffff;
    padding: calc(var(--base-unit) * 2);
    border-radius: calc(var(--base-unit) * 2);
    overflow-x: auto;
    margin-top: calc(var(--base-unit) * 2);
    margin-bottom: calc(var(--base-unit) * 2);
    line-height: 140%; /* Override default 100% line-height */
    
    code {
      background-color: transparent;
      color: inherit;
      padding: 0;
      border-radius: 0;
      font-size: var(--font-size-default); /* 1x default font size */
    }
    
    &.big-code {
      grid-column: 2 / 12;
      
      @media (min-width: 768px) {
        grid-column: 2 / 12;
      }
      
      @media (min-width: 1024px) {
        grid-column: 3 / 11;
      }
    }
  }
  
  code {
    background-color: var(--color-secondary-bg);
    padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 1);
    border-radius: calc(var(--grid-unit) * 0.5);
    font-family: 'IBM Plex Mono', sfmono-regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: var(--font-size-default); /* 1x default font size */
    line-height: 140%; /* Override default 100% line-height */
  }
  
  img {
    width: 100%; /* Force image to fill 100% of container width */
    height: auto;
    border-radius: calc(var(--base-unit) * 2);
    margin-top: calc(var(--base-unit) * 2);
    margin-bottom: calc(var(--base-unit) * 2);
    display: block;
  }

  /* Big Image layout rule */
  img.big-img {
    grid-column: 2 / 12;
    
    @media (min-width: 768px) {
      grid-column: 2 / 12;
    }
    
    @media (min-width: 1024px) {
      grid-column: 3 / 11;
    }
  }
  
  /* Figure and Caption alignment */
  figure {
    display: contents; /* Allows children to align directly on article grid */
    
    img {
      grid-column: 2 / 12;
      margin-top: calc(var(--base-unit) * 2);
      margin-bottom: 0; /* space handled by figcaption margin-top */
      
      @media (min-width: 768px) {
        grid-column: 3 / 11;
      }
      
      @media (min-width: 1024px) {
        grid-column: 4 / 10;
      }
      
      &.big-img {
        grid-column: 2 / 12;
        
        @media (min-width: 768px) {
          grid-column: 2 / 12;
        }
        
        @media (min-width: 1024px) {
          grid-column: 3 / 11;
        }
      }
    }
    
    figcaption {
      grid-column: 2 / 12;
      margin-top: calc(var(--base-unit) * 1); /* Spacing between image and caption is 1x */
      margin-bottom: calc(var(--base-unit) * 2);
      font-size: calc(var(--base-unit) * 1); /* Mobile default: 1x (8px) */
      line-height: 140%;
      color: var(--color-muted);
      
      .caption-label {
        font-weight: normal;
        display: inline-flex;
        align-items: flex-start; /* top-aligned */
        gap: calc(var(--base-unit) * 2); /* Gap between emoji and text is 2x */
      }
      
      .caption-desc {
        margin-top: calc(var(--base-unit) * 0.8);
      }
      
      @media (min-width: 768px) {
        grid-column: 3 / 11;
        font-size: calc(var(--base-unit) * 0.75); /* Tablet and Desktop: 0.75x (12px / 15px) */
      }
      
      @media (min-width: 1024px) {
        grid-column: 4 / 10;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: var(--base-unit);
        align-items: start; /* top-aligned */
        
        .caption-label {
          grid-column: 1 / 3;
        }
        
        .caption-desc {
          grid-column: 3 / 7;
          margin-top: 0;
        }
      }
    }
    
    &.big-img {
      img {
        grid-column: 2 / 12;
        
        @media (min-width: 768px) {
          grid-column: 2 / 12;
        }
        
        @media (min-width: 1024px) {
          grid-column: 3 / 11;
        }
      }
      
      figcaption {
        grid-column: 2 / 12;
        
        @media (min-width: 768px) {
          grid-column: 2 / 12; /* Left aligned with big image (spans columns 2 to 11) */
          display: grid;
          grid-template-columns: repeat(10, 1fr);
          column-gap: var(--base-unit);
          align-items: start; /* top-aligned */
          
          .caption-label {
            grid-column: 1 / 3; /* Spans columns 2 and 3 */
          }
          
          .caption-desc {
            grid-column: 4 / 11; /* Spans columns 5 to 11, keeping description left edge aligned */
            margin-top: 0;
          }
        }
        
        @media (min-width: 1024px) {
          grid-column: 3 / 11; /* Left aligned with big image (spans columns 3 to 10) */
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          column-gap: var(--base-unit);
          align-items: start; /* top-aligned */
          
          .caption-label {
            grid-column: 1 / 3; /* Spans columns 3 and 4 */
          }
          
          .caption-desc {
            grid-column: 4 / 9; /* Spans columns 6 to 10, keeping description left edge aligned */
            margin-top: 0;
          }
        }
      }
    }
  }
  
  hr {
    grid-column: 1 / 13;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-top: calc(var(--base-unit) * 3);
    margin-bottom: calc(var(--base-unit) * 3);
  }
}