/* ==========================================================================
   Info sections — About / Experience / Education / Activities
   Built as ONE reusable pattern that mirrors the Projects (dark, left)
   and Blog (light, right) sections exactly, so scrolling through the
   page reads as one consistent alternating rhythm instead of a
   different layout system for every section.
   ========================================================================== */

   section[id] {
    scroll-margin-top: 90px;
  }
  
  .info-section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0 15vw;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, background-image 0.3s ease;
  }
  
  .info-section--dark {
    background-color: var(--section-dark-bg);
  }
  
  .info-section--light {
    background-color: var(--background-color);
    background-image: linear-gradient(to bottom, var(--background-color) 80%, var(--blog-gradient-end));
  }
  
  .info-section--left {
    justify-content: flex-start;
  }
  
  .info-section--right {
    justify-content: flex-end;
  }
  
  .info-container {
    width: 100%;
    max-width: 700px;
    z-index: 2;
    margin: 100px 0;
  }
  
  /* --- About section: wider container + two-column layout so the photo
     sits centered alongside the text, as opposed to squeezed into the
     heading row. --- */
  .info-container--wide {
    max-width: 1080px;
  }
  
  .about-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
  }
  
  .about-text {
    flex: 1;
    min-width: 0;
  }  
  .about-photo-frame {
    flex-shrink: 0;
    width: clamp(200px, 50vw, 280px);
    height: clamp(200px, 50vw, 280px);
    margin: 0 auto;
    /* Lines the photo's top edge up with the first paragraph line: this
       reuses the exact same clamp() as .info-heading-text's font-size,
       scaled by its 0.9 line-height, plus the lede's 32px top margin —
       so it tracks the heading's real rendered height at every width
       instead of a fixed guess. */
    margin-top: calc(clamp(5rem, 15vw, 200px) * 0.9 + 32px);
    border-radius: 24px;
    overflow: hidden;
    border: 3px solid var(--section-dark-border); /* Uses a softer default border */
    position: relative;
    /* Added border-color to the transition so it smoothly animates on enter AND exit */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease,
                border-color 0.5s ease;
  }
  
  .about-photo-frame:hover {
    transform: translateY(-6px) rotate(-1.5deg) scale(1.03);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    border-color: var(--special-accent); /* Turns to the special orange/red accent color */
  }
  
  .about-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .about-photo-frame:hover .about-photo {
    transform: scale(1.1); /* Keeps the image zoom effect you already have */
  }

  /* --- Decorative ASCII art (My Work / Blog backdrops) --- */
  .ascii-leaf-parent-container,
  .ascii-leaves-parent-container {
    position: absolute;
    width: 60vw;
    pointer-events: none;
    user-select: none;
  }
  
  .ascii-leaf-parent-container {
    bottom: 0;
    right: 0;
    opacity: 0.15;
  }
  
  .ascii-leaves-parent-container {
    top: 0;
    left: 0;
    opacity: 0.4;
  }
  
  .ascii-art {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* .info-section--dark always uses the dark section background in both
     themes, so the ascii-leaf linework (dark strokes) needs to stay
     inverted regardless of theme — otherwise it's dark-on-dark. */
  .ascii-leaf-parent-container .ascii-art {
    filter: invert(1) brightness(0.9);
  }
  
  /* .info-section--light uses the page background, which does flip with
     theme, so only invert the ascii-leaves art in dark mode. */
  [data-theme="dark"] .ascii-leaves-parent-container .ascii-art {
    filter: invert(1) brightness(0.9);
  }
  
  /* Inverted (white) linework at the light-mode opacity reads far more
     legible against a near-black page, competing with the section text
     instead of sitting quietly behind it — pull it back down in dark mode. */
  [data-theme="dark"] .ascii-leaves-parent-container.in-view {
    opacity: 0.16 !important;
  }
  
  .info-section--right .info-contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .info-section--right .about-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  /* --- Heading: same giant clamp size + skew entrance across every section --- */
  .info-heading-text {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    font-size: clamp(5rem, 15vw, 200px);
    line-height: 0.9;
  }
  
  .info-section--dark .info-heading-text {
    color: var(--section-dark-text);
  }
  
  .info-section--light .info-heading-text {
    color: var(--accent-main);
  }
  
  .info-section--right .info-heading-text {
    text-align: left;
  }
  
  /* --- Lede paragraphs (About bio) --- */
  .info-lede {
    max-width: 62ch;
    line-height: 1.7;
    font-size: clamp(15px, 1.1vw, 17px);
    margin-top: 24px;
    opacity: 0.75;
    text-align: justify;       
  text-justify: inter-word;  
  }
  
  .info-section--dark .info-lede {
    color: var(--section-dark-text);
  }
  
  .info-lede:first-of-type {
    margin-top: 32px;
  }
  
  /* --- Card list: same divider-list pattern as project/blog items --- */
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 32px;
    width: 100%;
  }
  
  .info-card {
    border-bottom: 1px solid var(--section-dark-border);
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .info-section--light .info-card {
    border-bottom-color: var(--card-border);
  }
  
  .info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .info-section--right .info-card-header {
    flex-direction: row;
  }
  
  .info-card-title {
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
  }
  
  .info-section--dark .info-card-title {
    color: var(--section-dark-text);
  }
  
  .info-section--light .info-card-title {
    color: var(--accent-main);
  }
  
  .info-card-meta {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    white-space: nowrap;
  }
  
  .info-section--dark .info-card-meta {
    color: var(--section-dark-text);
    opacity: 0.7;
  }
  
  .info-section--light .info-card-meta {
    color: var(--accent-main);
    opacity: 0.7;
  }
  
  .info-card-desc {
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    max-width: 90%;
    text-align: justify;  
  }
  
  .info-section--right .info-card-desc {
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
  
  .info-section--dark .info-card-desc {
    color: var(--section-dark-text);
    opacity: 0.65;
  }
  
  .info-section--light .info-card-desc {
    color: var(--text-dark);
    opacity: 0.7;
  }
  
  /* Experience & Activities: keep the block anchored to the right of the
     page (same as Blog), but read the card title/description left-to-right
     instead of right-aligned — right-aligned paragraph text is hard to
     scan, so this keeps the layout rhythm while fixing readability. */
  .info-section--ltr-content .info-card-header {
    flex-direction: row;
  }
  
  .info-section--ltr-content .info-card-title,
  .info-section--ltr-content .info-card-desc {
    text-align: left;
  }
  
  .info-section--ltr-content .info-card-desc {
    margin-left: 0;
    margin-right: auto;
  }
  
  /* --- CTA button: identical skew-fill button used on Projects/Blog --- */
  .info-btn-wrapper {
    display: flex;
    width: 100%;
    padding-top: 10px;
  }
  
  .info-section--left .info-btn-wrapper {
    justify-content: flex-start;
  }
  
  .info-section--right .info-btn-wrapper {
    justify-content: flex-start;
  }
  
  .info-page-link {
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    width: max-content;
    font-weight: 300;
    font-size: clamp(17px, 2vw, 24px);
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 40px 0 10px;
    transition: color 0.4s ease-in-out;
  }
  
  .info-page-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: transform 0.4s ease-in-out;
  }
  
  .info-section--dark .info-page-link {
    color: var(--section-dark-text);
    border: 2px solid var(--section-dark-text);
  }
  
  .info-section--dark .info-page-link::before {
    background-color: var(--section-dark-text);
    transform: translateX(-105%) skewX(-15deg);
  }
  
  .info-section--dark .info-page-link:hover {
    color: var(--section-dark-bg);
  }
  
  .info-section--dark .info-page-link:hover::before {
    transform: translateX(0) skewX(0deg);
  }
  
  .info-section--light .info-page-link {
    color: var(--accent-main);
    border: 2px solid var(--accent-main);
  }
  
  .info-section--light .info-page-link::before {
    background-color: var(--accent-main);
    transform: translateX(105%) skewX(15deg);
  }
  
  .info-section--light .info-page-link:hover {
    color: var(--background-color);
  }
  
  .info-section--light .info-page-link:hover::before {
    transform: translateX(0) skewX(0deg);
  }
  
  /* --- Card hover: only applies when an info-card is a link
     (My Work / Blog); About/Experience/Education/Activities cards are
     plain divs and are unaffected. On hover the card just slides
     sideways and its text/divider brighten to full white — no
     background fill or shadow. --- */
  a.info-card {
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  a.info-card .info-card-title,
  a.info-card .info-card-meta,
  a.info-card .info-card-desc {
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  /* Slightly dimmed by default so the hover brightening reads clearly */
  .info-section--dark a.info-card .info-card-title,
  .info-section--dark a.info-card .info-card-desc {
    opacity: 0.72;
  }

  .info-section--light a.info-card .info-card-title,
  .info-section--light a.info-card .info-card-desc {
    opacity: 0.8;
  }

  a.info-card:hover .info-card-title,
  a.info-card:hover .info-card-desc {
    opacity: 1;
  }

  .info-section--dark a.info-card:hover .info-card-title,
  .info-section--dark a.info-card:hover .info-card-desc,
  .info-section--dark a.info-card:hover .info-card-meta {
    color: #ffffff;
  }

  .info-section--light a.info-card:hover .info-card-title,
  .info-section--light a.info-card:hover .info-card-meta {
    color: var(--accent-main);
    opacity: 1;
  }

  .info-section--light a.info-card:hover .info-card-desc {
    color: var(--text-dark);
  }

  a.info-card:hover .info-card-meta {
    opacity: 1;
  }

  /* Divider line brightens on hover too */
  a.info-card {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
  }

  .info-section--dark a.info-card:hover {
    border-bottom-color: rgba(255, 255, 255, 0.55);
  }

  .info-section--light a.info-card:hover {
    border-bottom-color: color-mix(in srgb, var(--accent-main) 55%, transparent);
  }

  .info-section--left a.info-card:hover {
    transform: translateX(8px);
  }

  .info-section--right a.info-card:hover {
    transform: translateX(-8px);
  }

  a.info-card:hover .info-card-meta::after {
    content: " →";
  }
  
  
  /* --- Responsive: same collapse behaviour as Projects/Blog --- */
  @media (max-width: 768px) {
    .info-section {
      padding: 100px 6vw;
      min-height: auto;
    }
  
    .info-heading-text {
      text-align: center !important;
      font-size: clamp(3.5rem, 20vw, 10rem);
      margin: 0 auto;
    }
  
    .info-section--right .info-contents {
      align-items: center;
      text-align: center;
    }
  
    .about-layout,
    .info-section--right .about-layout {
      flex-direction: column;
      text-align: center;
      gap: 32px;
    }
  
    .about-photo-frame {
      width: clamp(160px, 40vw, 220px);
      height: clamp(160px, 40vw, 220px);
      margin: 0 auto;
    }
  
    .info-card-header,
    .info-section--right .info-card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  
    .info-section--ltr-content .info-card-header {
      align-items: flex-start;
    }
  
    .about-top {
      flex-direction: column-reverse;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
  
    .about-photo-frame {
      width: 120px;
      height: 120px;
    }
  
    .info-btn-wrapper {
      justify-content: center !important;
    }
  }
/* Link Base Styling (Light Mode Default) */
.custom-link {
  text-decoration: none;
  color: var(--accent-main); /* Uses your existing dark accent color (#1a1a1a / charcoal) */
  border-bottom: 1.5px solid var(--accent-main);
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
}

.custom-link:hover {
  opacity: 0.8;
}

/* Link Styling for Dark Mode */
[data-theme="dark"] .custom-link {
  color: #f0f0f0; /* Off-white for high contrast on dark backgrounds */
  border-bottom-color: #f0f0f0;
}