/* ===========================================
   SID MACHINES | Tablet & iPad Styles (768px–1024px)
   FINAL COMBINED STYLES V3
   =========================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /*
    ================================================
    EDITABLE PARAMETERS FOR HERO TEXT
    ================================================
    --tablet-text-margin-top:    Adjusts how far the text block is from the top.
    --tablet-main-heading-size:  Font size for the main "Systems Under..." title.
    --tablet-sub-heading-size:   Font size for the "Not Launched Yet..." subtitle.
    --tablet-description-size:   Font size for the main paragraph.
    --tablet-founder-size:       Font size for the "Founder & Lead Researcher" line.
    --tablet-equation-size:      Font size for the typewriter "Equation..." line.
  */
  :root {
    --tablet-text-margin-top:    8vh;
    --tablet-main-heading-size:  3.8rem;
    --tablet-sub-heading-size:   1.6rem;
    --tablet-description-size:   1.3rem;
    --tablet-founder-size:       1.15rem;
    --tablet-equation-size:      1.7rem;
  }

  /* ===== HEADER (Logo) ===== */
  .header {
    top: 2rem;
    left: 2.5rem;
  }

  .logo-img {
    width: 4.5rem;
  }

  .logo-text h1 {
    font-size: 1.8rem;
  }

  .logo-text p {
    font-size: 0.85rem;
  }

  /* ===== HERO SECTION ===== */
  .hero-section {
    height: auto;
    min-height: 100vh; 
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
  }

  .content {
    flex-direction: column;
    align-items: center;
    display: flex;
    flex-grow: 1;
    width: 100%;
    justify-content: space-between;
    padding: 0 2.5rem;
  }

  .text-content {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--tablet-text-margin-top);
    /* NEW: Using flexbox for precise centering of all child elements */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ===== HEADINGS & TEXT (LINKED TO NEW PARAMETERS) ===== */
  .main-heading {
    font-size: var(--tablet-main-heading-size);
    text-align: center; /* Ensures text inside wraps centrally if needed */
  }

  .sub-heading {
    font-size: var(--tablet-sub-heading-size);
    margin-top: 0.5rem;
    text-align: center; /* Ensures text inside wraps centrally if needed */
    white-space: nowrap; /* Forces the text onto a single line */
  }

  .description {
    /* REMOVED max-width TO ENSURE ALIGNMENT WITH HEADINGS */
    margin: 1.5rem auto 2.5rem;
    font-size: var(--tablet-description-size);
    line-height: 1.8;
    text-align: center; /* Ensures text inside wraps centrally if needed */
  }

  .founder {
    margin-bottom: 3rem;
    font-size: var(--tablet-founder-size);
  }
  
  .equation {
      font-size: var(--tablet-equation-size);
  }

  /* ===== CHARACTER IMAGE (SIZE & POSITIONING FIXED) ===== */
  .character-img {
    transform: translateY(0);
    width: clamp(26rem, 70vw, 48rem);
    margin-top: 3rem;
    display: block;
    object-fit: contain;
    object-position: bottom;
    max-height: 55vh;
  }

  /* ===== SCROLL BUTTON (SIZE INCREASED & CENTERED) ===== */
  .scroll-container {
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  #scrollBtn {
    font-size: 1rem;
  }

  /* ===== CORE SECTION (SIZES INCREASED & RE-ORDERED) ===== */
  .core-section {
    padding: 7rem 2.5rem;
  }

  .core-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
  }

  .core-left {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .core-right {
    order: 1;
    justify-content: center;
  }

  .core-logo {
    margin-top: 0;
    width: clamp(18rem, 45vw, 25rem);
    margin-bottom: 3rem;
  }

  .core-title {
    font-size: 2.8rem;
  }
  
  .core-subtitle {
      font-size: 1.2rem;
  }

  .core-note {
    max-width: 650px;
  }

  .core-note h3 {
      font-size: 1.3rem;
  }

  .core-note p {
    font-size: 1.1rem;
    line-height: 1.8;
  }
  
  .core-btn {
      padding: 0.9rem 2.2rem;
      font-size: 1rem;
  }

  .core-status {
    font-size: 1.6rem;
  }
  
  .core-icons {
      font-size: 1.5rem;
      gap: 2rem;
  }

  /* ===== FIXED OVERLAY TEXTS (SIZES INCREASED) ===== */
  .core-phase,
  .core-date {
    font-size: 0.9rem;
    bottom: 2.5rem;
  }
  
  .core-phase { left: 3rem; }
  .core-date { right: 3rem; }
  
  /* ===== TABLET-SPECIFIC ANIMATIONS ===== */
  @keyframes tabletFadeIn {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes tabletFadeOut {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-40px);
    }
  }

  .character-img.fade-in {
    animation-name: tabletFadeIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  .character-img.fade-out {
    animation-name: tabletFadeOut;
    animation-duration: 0.6s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
  }
}


/* ===========================================
   RECRUITING MODAL (TABLET)
   =========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .modal-content {
    /* Adjusts vertical positioning for a better fit on tablets */
    margin: 10% auto;
    width: 80%;
    max-width: 600px;
    padding: 30px 40px;
  }

  .modal-content h2 {
    font-size: 1.8rem;
  }

  .modal-content p {
    font-size: 1.1rem;
  }
  
  .modal-content .contact-info {
    font-size: 1.1rem;
  }
}