/* =============================================================
   Postulia — Page Template
   File: assets/css/page.css
   Scope: styles for page.php only
   - Hero matches Single Emploi Public (title only)
   - Two-column layout with sticky empty sidebar
   - Left content card flattens below 1000px
   ============================================================= */

@layer pages {

  /* ---------------- Root ---------------- */
  .page{
    color: var(--text-default);
    background: var(--background);
  }

/* ---------------- Hero (match single Emploi Public) ---------------- */
.page .hero{
  position: relative;
  color: var(--text-default);
  border-bottom: 1px solid var(--border-default);
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--brand-100) 80%, #fff), transparent),
    radial-gradient(700px 400px at 85% 0%,  color-mix(in srgb, #dbeafe 60%, #fff), transparent),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 60%, #f4f7ff 100%);
  min-height: 240px;
  align-content: center;
}

/* Grid overlay uses ::before like single Emploi Public */
.page .hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(to right, hsla(215,40%,80%,.2) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(215,40%,80%,.2) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: page-hero-move-grid 10s linear infinite;
}
@keyframes page-hero-move-grid{
  from { background-position: 0 0; }
  to   { background-position: 100px 100px; }
}

/* Container padding and stacking context */
.page .hero > .container{
  position: relative;
  z-index: 2;
  text-align: left;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-8);
}
@media (min-width: 641px){
  .page .hero{ min-height: 260px; }
  .page .hero > .container{ padding-block: var(--sp-9); }
}
@media (min-width: 1000px){
  .page .hero > .container{ padding-block: var(--sp-11); }
}

/* Title sizing unchanged */
.page .hero__title{
  font: var(--font-display-xl, 700 clamp(28px, 4vw, 40px)/1.15 var(--font-sans));
  letter-spacing: -.0125em;
  margin: 0;
  color: var(--text-default);
}


  /* ---------------- Content layout ---------------- */
  .page .content{ padding-block: var(--sp-8); }
  .page .layout{
    display: grid;
    gap: var(--sp-6);
  }
  @media (min-width: 1000px){
    .page .layout{
      grid-template-columns: 1fr 320px; /* main | sidebar */
      align-items: start;
    }
  }

  /* ---------------- Main column ---------------- */
  .page .main-content{ display: grid; gap: var(--sp-6); }

  /* Card wraps the page content (matches single Emploi Public) */
  .page .entry.card{
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
  }

  /* Flatten the left card below 1000px */
  @media (max-width: 999px){
    .page .main-content .card{
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }
  }

  /* ---------------- Sidebar ---------------- */
  .page .aside{ min-width: 0; } /* avoid overflow */
  .page .sidebar__sticky{
    position: sticky;
    top: var(--sp-8);
    display: grid;
    gap: var(--sp-6);
  }

  /* ---------------- Prose (content) ---------------- */
  .page .prose{
    --flow: var(--sp-4);
  }
  .page .prose > * + *{ margin-block-start: var(--flow); }
  .page .prose h2{
    font: var(--font-display-lg, 700 clamp(22px, 3vw, 28px)/1.2 var(--font-sans));
    margin: 0 0 var(--sp-3);
  }
  .page .prose h3{
    font: var(--font-display-md, 700 clamp(18px, 2.5vw, 22px)/1.25 var(--font-sans));
    margin: var(--sp-4) 0 var(--sp-2);
  }
  .page .prose p{ line-height: 1.7; color: var(--text-default); }
  .page .prose blockquote{
    margin: var(--sp-5) 0;
    padding: var(--sp-4);
    border-inline-start: 3px solid var(--brand-300);
    background: color-mix(in srgb, var(--brand-50) 35%, transparent);
    border-radius: var(--radius);
  }
  .page .prose ul,
  .page .prose ol{ padding-inline-start: 1.5em; }
  .page .prose a{
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .page .prose a:hover{ color: var(--brand-700); }

}