/* -------------------------------------------------------------
   Cascade Layers Order Declaration
   ------------------------------------------------------------- */
@layer reset, base, theme, layout, components, utilities;

/* -------------------------------------------------------------
   1. Reset Layer
   ------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

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

  body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.4;
  }

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

  button {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Accessibility reductions */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* -------------------------------------------------------------
   2. Theme & Design Tokens Layer
   ------------------------------------------------------------- */
@layer theme {
  /* Self-hosted iA Writer Quattro S Fonts (TTF mappings) */
  @font-face {
    font-family: 'iA Writer Quattro S';
    src: url('../fonts/iAWriterQuattroS-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'iA Writer Quattro S';
    src: url('../fonts/iAWriterQuattroS-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* Color Schemes and Custom Properties */
  :root {
    color-scheme: light dark;

    /* Theme colors */
    --color-bg: light-dark(#ffffff, #000000);
    --color-text: light-dark(#000000, #ffffff);
    --color-text-secondary: light-dark(#5f5f5f, #a0a0a0);
    --color-border: light-dark(#000000, #ffffff);

    /* Fonts */
    --font-sans: 'iA Writer Quattro S', sans-serif;
    
    /* Outlines */
    --outline-style: 2px dashed var(--color-border);
  }

  /* Manual JS classes for theme state overriding */
  :root.light {
    color-scheme: light;
  }

  :root.dark {
    color-scheme: dark;
  }
}

/* -------------------------------------------------------------
   3. Base HTML Elements Layer
   ------------------------------------------------------------- */
@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Keyboard focus states */
  a:focus-visible,
  button:focus-visible {
    outline: var(--outline-style);
    outline-offset: 3px;
  }

  /* Skip link styling */
  .skip-link {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .skip-link:focus-visible {
    inline-size: auto;
    block-size: auto;
    clip: auto;
    margin: 0;
    padding: 10px;
    z-index: 1000;
    border: 1px solid var(--color-border);
    border-radius: 3px;
  }
}

/* -------------------------------------------------------------
   4. Layout & Grid Grid Layer
   ------------------------------------------------------------- */
@layer layout {
  /* Aligns theme toggle and cards vertically */
  .portfolio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacer between content and footer */
    width: 100%;
    max-width: 1170px;
    margin: auto;
  }

  .portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Spacer between top card and bottom grid */
    width: 100%;
  }

  /* Top card 3-column proportional grid */
  .top-card-grid {
    display: grid;
    grid-template-columns: 270fr 470fr 230fr;
    gap: 30px;
  }

  /* Bottom cards 2-column proportional grid */
  .bottom-grid {
    display: grid;
    grid-template-columns: 770fr 370fr;
    gap: 30px;
  }

  .grid-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* -------------------------------------------------------------
   5. Reusable Component Styling Layer
   ------------------------------------------------------------- */
@layer components {
  /* Theme Toggle */
  .theme-toggle-container {
    display: flex;
    justify-content: flex-end;
    padding-inline-end: 10px;
  }

  .theme-toggle-link {
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-decoration: underline;
    transition: color 0.2s ease;
  }

  .theme-toggle-link:hover {
    color: var(--color-text);
  }

  /* Rounded layout cards */
  .card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding-block: 20px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  /* Exact asymmetrical padding offsets from Figma */
  .top-card {
    padding-inline-start: 100px;
    padding-inline-end: 240px;
  }

  .about-card,
  .extra-card {
    padding-inline: 100px;
  }

  /* Top card header styling */
  .top-card-header {
    margin-block-end: 20px;
  }

  .profile-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }

  .profile-title {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
  }

  /* Headings & Text */
  .col-heading {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }

  .col-text,
  .bio-text,
  .extra-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
  }

  .social-nav a {
    display: block;
    line-height: 1.4;
  }

  /* About and Extra card structures */
  .about-content,
  .extra-content {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Paragraph gaps */
    margin-block-start: 10px;
  }

  /* Underline link rules to match Figma design specifications */
  .link-underline {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: opacity 0.2s ease;
  }

  .link-underline:hover {
    opacity: 0.7;
  }

  /* Footer layout */
  .portfolio-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-secondary);
    padding-block: 5px;
    margin-block-start: 10px;
  }

  .footer-time {
    font-weight: 400;
  }

  .footer-copyright {
    text-align: right;
    font-weight: 400;
  }
}

/* -------------------------------------------------------------
   6. Utilities Layer & Mobile Breakpoints
   ------------------------------------------------------------- */
@layer utilities {
  .text-secondary {
    color: var(--color-text-secondary);
  }

  .spacer-top {
    margin-block-start: 10px;
  }

  .italic-text {
    font-style: italic;
  }

  /* Responsive styling for mid-range desktops and tablets */
  @media (max-width: 1200px) {
    .portfolio-wrapper {
      padding-inline: 20px;
    }
    
    .top-card {
      padding-inline-start: 50px;
      padding-inline-end: 100px;
    }

    .about-card,
    .extra-card {
      padding-inline: 50px;
    }
  }

  /* Responsive styling for small screens / mobile viewports */
  @media (max-width: 900px) {
    body {
      padding: 10px;
      align-items: flex-start; /* Do not force vertical center on small heights */
    }

    .portfolio-wrapper {
      padding-block: 20px;
    }

    .top-card-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .bottom-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .top-card {
      padding-inline: 30px;
    }

    .about-card,
    .extra-card {
      padding-inline: 30px;
    }

    .portfolio-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .footer-copyright {
      text-align: left;
    }
  }

  /* Ultra-small mobile optimizations */
  @media (max-width: 480px) {
    .top-card,
    .about-card,
    .extra-card {
      padding-inline: 20px;
      padding-block: 20px;
    }
  }
}