/* =========================================================
   Aqua-Nile Online CV Platform — Responsive Compatibility Layer
   Applies to the existing English/French full CVs, short profiles,
   locked profiles, and CV-preparation pages without changing content,
   links, email forms, downloads, or JavaScript functionality.
   Version: 2026-07-12
   ========================================================= */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
canvas,
video,
iframe,
embed,
object {
  max-width: 100%;
}

img,
picture,
video {
  height: auto;
}

iframe,
embed,
object {
  width: 100%;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.wrap,
.container,
.page,
.hero-grid,
.topbar-inner,
.section,
.card,
.profile-box,
.photo-card,
.project-showcase,
.project-card,
.project-card-content,
.timeline-item,
.info-card,
.highlight-card,
.email-modal-content,
.grid,
.grid-2,
.grid-3,
.side-stack {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
.label,
.value,
.subtitle,
.summary,
.lead,
.period,
.meta-pill,
.notice,
.contact-item,
.project-card-content,
.project-card-content span,
.project-card-content p,
.download-btn,
.profile-btn,
.btn,
.link-pill,
.project-link-btn {
  overflow-wrap: anywhere;
}

.project-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.project-table {
  max-width: none;
}

input,
select,
textarea {
  max-width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(18, 77, 140, 0.25);
  outline-offset: 3px;
}

/* Comfortable reading width on large monitors. */
@media (min-width: 1180px) {
  .wrap,
  .topbar-inner {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .share-wrap {
    max-width: 1120px !important;
  }
}

@media (max-width: 900px) {
  body {
    font-size: 16px;
  }

  .wrap,
  .topbar-inner {
    width: calc(100% - 22px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero {
    padding: 24px 11px 30px !important;
  }

  .hero-grid,
  .grid,
  .grid-2,
  .grid-3,
  .project-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-grid {
    gap: 18px !important;
    align-items: start !important;
  }

  .photo,
  .photo-card img,
  .profile-box img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .photo {
    width: min(180px, 58vw) !important;
    height: min(180px, 58vw) !important;
    border-radius: 22px !important;
  }

  .lang-switch,
  .logo-bar,
  .project-links-fixed {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    justify-content: center !important;
  }

  .logo-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 12px !important;
  }

  .logo-bar .logo,
  .logo-bar img {
    width: auto !important;
    max-width: min(210px, 80vw) !important;
    height: auto !important;
    max-height: 62px !important;
  }

  .project-links-fixed {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
  }

  .project-link-btn,
  .lang-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .topbar {
    position: relative !important;
    top: auto !important;
    padding: 11px 0 !important;
  }

  .topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .brand {
    justify-content: center !important;
    text-align: center !important;
  }

  .brand img,
  .topbar .logo {
    max-height: 48px !important;
    width: auto !important;
  }

  .nav {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 2px 0 7px !important;
  }

  .nav a {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(49, 93, 145, 0.18) !important;
    border-radius: 999px !important;
  }

  main,
  .page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main {
    padding-top: 18px !important;
    padding-bottom: 34px !important;
  }

  .page {
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  .section,
  .card,
  .profile-box,
  .photo-card,
  .project-showcase,
  .share-card {
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 17px !important;
  }

  .section,
  .project-showcase {
    margin-bottom: 14px !important;
  }

  h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.12 !important;
  }

  .hero h2,
  .subtitle {
    font-size: clamp(1.05rem, 5vw, 1.28rem) !important;
    line-height: 1.4 !important;
  }

  .section h3,
  .card h2,
  .card h3,
  .project-showcase h3 {
    line-height: 1.25 !important;
  }

  .lead,
  .summary,
  .section p,
  .card p,
  .timeline-item p,
  .project-showcase > p,
  .project-card-content span,
  .project-card-content p,
  .notice,
  .quote-box {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    hyphens: auto;
  }

  .meta-bar,
  .contact-row,
  .profile-actions,
  .action-buttons,
  .buttons,
  .bottom-actions,
  .share-row,
  .socials {
    max-width: 100% !important;
  }

  .project-card {
    align-items: flex-start !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  .project-card-logo {
    flex: 0 0 auto !important;
  }

  .project-table {
    min-width: 720px !important;
    font-size: 0.88rem !important;
  }

  .email-modal {
    padding: 10px !important;
    align-items: center;
    justify-content: center;
  }

  .email-modal-content {
    width: calc(100% - 10px) !important;
    max-width: 480px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 5vh auto !important;
    padding: 22px 16px 18px !important;
    border-radius: 16px !important;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  .download-btn,
  .profile-btn,
  .btn,
  .link-pill,
  .extended-btn,
  .project-link-btn,
  .action-buttons a,
  .buttons a {
    min-height: 44px !important;
  }
}

@media (max-width: 560px) {
  .wrap,
  .topbar-inner {
    width: calc(100% - 14px) !important;
  }

  .hero {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .section,
  .card,
  .profile-box,
  .photo-card,
  .project-showcase,
  .share-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Narrow phone text is left-aligned to prevent large justified gaps. */
  p,
  li,
  .summary,
  .lead,
  .section p,
  .card p,
  .timeline-item p,
  .project-card-content span,
  .project-card-content p {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
  }

  .lang-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .lang-btn {
    width: 100% !important;
  }

  .project-links-fixed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .project-link-btn {
    width: 100% !important;
    white-space: normal !important;
    padding: 9px 8px !important;
  }

  .meta-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .meta-pill {
    width: 100% !important;
    border-radius: 13px !important;
    padding: 10px 12px !important;
  }

  .action-buttons,
  .profile-actions,
  .buttons,
  .bottom-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .action-buttons a,
  .profile-actions a,
  .buttons .btn,
  .bottom-actions a,
  .download-btn,
  .profile-btn,
  .extended-btn,
  .link-pill {
    width: 100% !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .share-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .share-link {
    min-width: 0 !important;
    width: 100% !important;
  }

  .contact-row,
  .contact-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .info-card,
  .timeline-item,
  .highlight-card,
  .mini,
  .notice {
    padding: 14px !important;
    border-radius: 13px !important;
  }

  .page > .card {
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  .project-links-fixed,
  .share-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  h1 {
    font-size: 1.85rem !important;
  }
}

@media print {
  html,
  body {
    overflow: visible !important;
  }

  .wrap,
  .topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .project-table {
    min-width: 100% !important;
  }
}

/* =========================================================
   AQUA-NILE CV PLATFORM — JUSTIFIED CV TEXT FOR ALL MEMBERS
   Applies to long CVs, short CVs, locked profiles and
   CV-in-preparation pages in English and French.
   Version: 2026-07-12-all-justified
   ========================================================= */

/*
   Justify real CV prose, experience descriptions, summaries,
   project descriptions and bullet explanations.
*/
main p,
.page p,
.section p,
.card p,
.timeline-item p,
.highlight-card p,
.info-card p,
.project-showcase p,
.project-card-content p,
.quote-box p,
.summary,
.lead,
.tools-text,
ul.clean li,
ul.milestone-list li,
.timeline-item li,
.section li,
.card li {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

/*
   Keep compact interface text natural. These are not CV prose:
   navigation, contact details, social sharing, modal controls,
   footer notes, tags and small metadata.
*/
nav p,
.nav p,
.topbar p,
.contact-item p,
.email-modal-content p,
.share-wrap p,
.footer p,
footer p,
.logo-bar p,
.lang-switch p,
.buttons p,
.socials p,
.meta-bar p {
    text-align: left !important;
    text-align-last: auto !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
}

/*
   Give justified paragraphs comfortable rhythm on phones.
   Automatic hyphenation uses each page's lang="en" or lang="fr".
*/
@media (max-width: 640px) {
    main p,
    .page p,
    .section p,
    .card p,
    .timeline-item p,
    .highlight-card p,
    .info-card p,
    .project-showcase p,
    .project-card-content p,
    .quote-box p,
    .summary,
    .lead,
    .tools-text,
    ul.clean li,
    ul.milestone-list li,
    .timeline-item li,
    .section li,
    .card li {
        line-height: 1.72 !important;
    }
}
/* /AQUA-NILE CV PLATFORM — JUSTIFIED CV TEXT FOR ALL MEMBERS */