@charset "utf-8";
/* CSS Document */
/* =============================
   BASE
============================= */
:root{
  /* Mediterranean accents (subtle) */
  --aegean: #1f6f8b; /* sea blue */
  --sun: #d9a441;    /* warm gold */
}

hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: var(--space-3) 0;
}

/* =============================
   PULL QUOTE - as on home CSS
============================= */

 .pull-quote{
      font-family:"Playfair Display", serif;
      font-style: italic;
      font-size: clamp(1.15rem, 2.1vw, 1.55rem);
      line-height: 1.85;
      max-width: 760px;
      margin: 2.75rem auto;
      padding: 1.8rem 1.8rem;
      position: relative;
      text-align: center;
    }

    .pull-quote::before,
    .pull-quote::after{
      position:absolute;
      font-size:5rem;
      color: rgba(0,0,0,0.08);
      font-family:"Playfair Display", serif;
      line-height:1;
      pointer-events:none;
    }

    .pull-quote::before{ content:"\201C"; top:-8px; left:6px; }
    .pull-quote::after{ content:"\201D"; bottom:-36px; right:6px; }

    .pull-quote span{
      display:block;
      margin-top:1.2rem;
      font-family: Inter, system-ui, sans-serif;
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: .18em;
      color:#666;
      font-size:.85rem;
    }

    
/* =============================
   INTRO SECTION
============================= */

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:3rem;
}

.intro-card{
  background:#fff;
  padding: 2.25rem 2.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.intro-card h2, .intro-card h3{
  margin: 0 0 var(--space-1);
  line-height: 1.2;
}

.intro-card p{
  margin: 0;
  color: rgba(34,34,34,.82);
}
    
    

/* =============================
   FADE-IN (subtle)
============================= */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  animation: reveal 650ms ease forwards;
}

.reveal.delay-1{ animation-delay: 80ms; }
.reveal.delay-2{ animation-delay: 160ms; }
.reveal.delay-3{ animation-delay: 240ms; }

@keyframes reveal{
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =============================
   CARD GRID
============================= */
.cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.card{
  grid-column: span 6;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 320px;

  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
  outline: 2px solid transparent;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  outline-color: rgba(31, 111, 139, .45); /* Aegean */
}

.card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.card:hover img{
  transform: scale(1.05);
  filter: saturate(1.06) contrast(1.02);
}

.card__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;

  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.76) 100%);
  color: #fff;
}

.card__overlay h3{
  margin-bottom: .4rem;
  font-size: 1.6rem;
}

.card__overlay p{
  margin: 0 0 1rem;
  opacity: .9;
  max-width: 45ch;
}

/* Button with Mediterranean tint */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;

  padding: .55rem .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #111;
  font-weight: 650;
  font-size: .9rem;

  box-shadow: 0 8px 20px rgba(0,0,0,.16);
  transition: transform .2s ease, background .2s ease;
}

.card:hover .btn{
  background: linear-gradient(90deg, rgba(31,111,139,.18), rgba(217,164,65,.18)), rgba(255,255,255,.95);
  transform: translateY(-1px);
}

/* Optional: subtle “sun-kissed” highlight line */
.accent-line{
  height: 3px;
  width: 80px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--aegean), var(--sun));
  margin: .75rem 0 1.25rem;
  opacity: .9;
}

/* =============================
   LANGUAGE GRID - ABOUT PAGE
============================= */

 .language-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:var(--space-3);
      padding-bottom:var(--space-5);
    }
        
         .language-section{
      background:var(--card-bg);
      border:1px solid var(--border);
      border-radius:20px;
      padding:1.5rem 1.5rem 1.35rem;
      box-shadow:var(--shadow);
    }

    .language-head{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:1rem;
      margin-bottom:.8rem;
    }

    .language-head h3{
      font-size:2rem;
    }

    .version-count{
      color:var(--muted);
      font-size:.92rem;
      white-space:nowrap;
    }

    .language-intro{
      color:var(--muted);
      margin-bottom:1.15rem;
    }

    
     .page-list{
      display:grid;
      gap:.8rem;
    }

    .page-link{
      display:block;
      text-decoration:none;
      padding:.9rem 1rem;
      border-left:3px solid transparent;
      background:#fcfcfc;
      border-radius:12px;
      transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
    }

    .page-link:hover,
    .page-link:focus-visible{
      background:#f5f5f5;
      border-left-color:var(--accent);
      transform:translateX(2px);
      outline:none;
    }

    .page-link strong{
      display:block;
      font-family:"Playfair Display", serif;
      font-weight:700;
      font-size:1.08rem;
      margin-bottom:.12rem;
    }

    .page-link span{
      display:block;
      color:var(--muted);
      font-size:.97rem;
      line-height:1.55;
    }


/* =============================
   AI GRID - ABOUT PAGE
============================= */


  .ai-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:var(--space-3);
      padding-bottom:var(--space-1);
      text-align: center;
  justify-content: center;
     
    }


/* =============================
   RESPONSIVE
============================= */
@media (max-width: 850px){
  .card{
    grid-column: span 12;
    min-height: 260px;
  }
    
    
    .intro-grid {
        
        grid-template-columns:1fr;
    }


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