/* =====================================================
   OUT OF THE FRAME — ARABIC DESIGN
   Arabic-only presentation layer
   ===================================================== */

/* ---------- GENERAL RTL ---------- */

html[lang="ar"] body{
  direction:rtl;
}

html[lang="ar"] .localized{
  direction:rtl;
  text-align:right;
}


/* =====================================================
   HEADER
   ===================================================== */

/* Keep logo Latin and in original direction */

html[lang="ar"] .brand{
  direction:ltr;
}

html[lang="ar"] .brand-lockup,
html[lang="ar"] .wordmark,
html[lang="ar"] .brand small{
  direction:ltr;
  text-align:left;
}


/* Arabic navigation */

html[lang="ar"] .nav{
  direction:rtl;
}

html[lang="ar"] .nav a{
  direction:rtl;
  text-align:center;

  font-family:Arial,Tahoma,sans-serif;
  font-size:15px;
  font-weight:500;

  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
}


/* Keep EN / FR / AR language selector Latin */

html[lang="ar"] .languages{
  direction:ltr;
}


/* =====================================================
   HOME HERO
   ===================================================== */

/*
  Important:
  Hero itself stays LTR because the visual composition
  and OUT OF THE FRAME title remain unchanged.
*/

html[lang="ar"] .hero{
  direction:ltr;
}


/* Main content block */

html[lang="ar"] .hero-content{
  direction:rtl;
  text-align:right;
}


/* KEEP LATIN HERO TITLE UNTOUCHED */

html[lang="ar"] .hero h1{
  direction:ltr;
  text-align:left;

  font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:800;
  line-height:.81;

  letter-spacing:-2px;
}


/* Arabic festival label */

html[lang="ar"] .hero .eyebrow{
  direction:rtl;
  text-align:right;

  font-family:Arial,Tahoma,sans-serif;
  font-size:17px;
  font-weight:600;

  line-height:1.5;
  letter-spacing:0;

  margin-bottom:18px;
}


/* Marrakech */

html[lang="ar"] .hero .place{
  direction:rtl;
  text-align:right;

  font-family:Arial,Tahoma,sans-serif;
  font-size:17px;
  font-weight:500;

  line-height:1.5;
  letter-spacing:0;
}


/* Hero introduction */

html[lang="ar"] .hero .intro{
  direction:rtl;
  text-align:right;

  font-family:Arial,Tahoma,sans-serif;
  font-size:19px;
  font-weight:400;

  line-height:1.8;

  max-width:390px;
}


/* Hero buttons */

html[lang="ar"] .hero .actions{
  direction:rtl;
  justify-content:flex-start;
}

html[lang="ar"] .hero .button{
  direction:rtl;

  font-family:Arial,Tahoma,sans-serif;
  font-size:15px;
  font-weight:600;

  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
}


/* Archive note on right side */

html[lang="ar"] .hero-note{
  direction:rtl;
  text-align:right;

  font-family:Arial,Tahoma,sans-serif;
  font-size:14px;
  font-weight:500;

  line-height:1.7;
  letter-spacing:0;
}


/* ---------- MOBILE ---------- */

@media(max-width:600px){

  html[lang="ar"] .nav a{
    font-size:15px;
  }

  html[lang="ar"] .hero .eyebrow{
    font-size:15px;
  }

  html[lang="ar"] .hero .place{
    font-size:15px;
  }

  html[lang="ar"] .hero .intro{
    font-size:17px;
    line-height:1.75;
    max-width:310px;
  }

  html[lang="ar"] .hero .button{
    font-size:14px;
  }

}


/* =====================================================
   ARABIC HOME HERO — RTL COMPOSITION
   ===================================================== */

html[lang="ar"] .hero{
  direction:rtl;
}

/* Move content to the right */

html[lang="ar"] .hero-content{
  position:relative;
  z-index:2;

  direction:rtl;
  text-align:right;

  margin-left:auto;
  margin-right:0;

  padding-left:0;
  padding-right:5.7%;

  align-items:flex-start;
}


/* Arabic hero title */

html[lang="ar"] .hero .arabic-hero-title{
  direction:rtl;
  text-align:right;

  width:auto;
  max-width:520px;

  margin:0 0 28px;
  padding:0;

  font-family:Arial,Tahoma,sans-serif;
  font-size:clamp(72px,7vw,118px);
  font-weight:700;

  line-height:.95;
  letter-spacing:0;
}


/* Remove Latin frame decoration from Arabic title */

html[lang="ar"] .hero .arabic-hero-title:after{
  display:none;
}


/* Arabic text widths */

html[lang="ar"] .hero .eyebrow,
html[lang="ar"] .hero .place,
html[lang="ar"] .hero .intro{
  margin-left:0;
  margin-right:0;
  text-align:right;
}


/* Buttons start from right */

html[lang="ar"] .hero .actions{
  width:100%;
  direction:rtl;
  justify-content:flex-start;
}


/* Arabic archive note moves to opposite side */

html[lang="ar"] .hero-note{
  right:auto;
  left:5.7%;

  direction:rtl;
  text-align:left;
}


/* Reverse hero overlay:
   strong terracotta on right -> transparent toward left */

html[lang="ar"] .hero-dynamic-overlay{
  background:
    linear-gradient(
      270deg,
      rgba(116,45,25,.92) 0%,
      rgba(116,45,25,.84) 30%,
      rgba(116,45,25,.28) 62%,
      rgba(116,45,25,0) 100%
    ) !important;
}


/* Mobile */

@media(max-width:600px){

  html[lang="ar"] .hero-content{
    padding-right:7%;
    padding-left:7%;
  }

  html[lang="ar"] .hero .arabic-hero-title{
    font-size:clamp(60px,19vw,88px);
    line-height:1;
    margin-bottom:24px;
  }

  html[lang="ar"] .hero-note{
    display:none;
  }

}


/* =====================================================
   ARABIC HOME — COMPOSITION REFINEMENT
   ===================================================== */


/* -----------------------------------------------------
   HEADER
   Keep original visual architecture.
   Arabic text itself remains RTL.
   ----------------------------------------------------- */

html[lang="ar"] header{
  direction:ltr;
}

html[lang="ar"] .brand{
  order:initial;
}

html[lang="ar"] .nav{
  direction:rtl;
}

html[lang="ar"] .languages{
  direction:ltr;
}


/* -----------------------------------------------------
   HERO CONTENT
   Compact Arabic editorial block on right.
   ----------------------------------------------------- */

html[lang="ar"] .hero{
  direction:ltr;
}

html[lang="ar"] .hero-content{
  position:relative;
  z-index:2;

  direction:rtl;
  text-align:right;

  width:min(620px,44vw);

  margin-left:auto;
  margin-right:0;

  padding:
    48px
    clamp(55px,6vw,105px)
    48px
    20px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}


/* Small festival line */

html[lang="ar"] .hero .eyebrow{
  width:100%;

  margin:0 0 20px;

  text-align:right;

  font-size:15px;
  line-height:1.5;
}


/* -----------------------------------------------------
   ARABIC TITLE
   ----------------------------------------------------- */

html[lang="ar"] .hero .arabic-hero-title{
  width:100%;
  max-width:none;

  direction:rtl;
  text-align:right;

  margin:0 0 24px;
  padding:0;

  font-size:clamp(68px,5.8vw,100px);
  font-weight:700;
  line-height:1.08;

  letter-spacing:0;

  white-space:nowrap;
}


/* We don't need the Latin frame decoration */

html[lang="ar"] .hero .arabic-hero-title:after{
  display:none;
}


/* -----------------------------------------------------
   LOCATION
   ----------------------------------------------------- */

html[lang="ar"] .hero .place{
  width:100%;

  margin:0 0 24px;

  text-align:right;

  font-size:15px;
  line-height:1.5;
}


/* -----------------------------------------------------
   INTRO
   ----------------------------------------------------- */

html[lang="ar"] .hero .intro{
  width:100%;
  max-width:430px;

  margin:0 0 24px;
  margin-left:auto;

  text-align:right;

  font-size:17px;
  line-height:1.75;
}


/* -----------------------------------------------------
   BUTTONS
   ----------------------------------------------------- */

html[lang="ar"] .hero .actions{
  width:100%;

  direction:rtl;

  display:flex;
  justify-content:flex-start;

  gap:12px;
}


/* Archive note remains on opposite side */

html[lang="ar"] .hero-note{
  left:5.7%;
  right:auto;

  text-align:left;
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media(max-width:700px){

  html[lang="ar"] .hero-content{
    width:100%;

    padding:
      42px
      7%
      42px
      7%;
  }

  html[lang="ar"] .hero .arabic-hero-title{
    white-space:normal;

    font-size:clamp(58px,17vw,82px);
    line-height:1.05;
  }

  html[lang="ar"] .hero .intro{
    max-width:330px;
  }

}



/* =====================================================
   ARABIC HERO — FINAL RIGHT/TOP POSITION
   ===================================================== */

html[lang="ar"] .hero{
  direction:ltr;
  position:relative;
}


/* Arabic content occupies the right side only */

html[lang="ar"] .hero-content{
  position:absolute;
  z-index:3;

  top:0;
  right:0;
  bottom:0;
  left:auto;

  width:46%;
  max-width:700px;

  margin:0;

  padding:
    clamp(48px,5vw,78px)
    clamp(55px,6vw,100px)
    40px
    35px;

  direction:rtl;
  text-align:right;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;

  background:transparent;
}


/* Festival label */

html[lang="ar"] .hero .eyebrow{
  width:100%;
  margin:0 0 24px;

  direction:rtl;
  text-align:right;

  font-size:16px;
  line-height:1.5;
}


/* Main Arabic title */

html[lang="ar"] .hero .arabic-hero-title{
  width:100%;
  max-width:none;

  margin:0 0 25px;
  padding:0;

  direction:rtl;
  text-align:right;

  font-size:clamp(64px,5.4vw,96px);
  line-height:1.05;
  letter-spacing:0;

  white-space:nowrap;
}


/* No Latin title frame */

html[lang="ar"] .hero .arabic-hero-title:after{
  display:none;
}


/* Location */

html[lang="ar"] .hero .place{
  width:100%;
  margin:0 0 24px;

  direction:rtl;
  text-align:right;

  font-size:15px;
  letter-spacing:0;
}


/* Intro */

html[lang="ar"] .hero .intro{
  width:100%;
  max-width:440px;

  margin:0 0 25px;
  margin-left:auto;

  direction:rtl;
  text-align:right;

  font-size:17px;
  line-height:1.7;
}


/* Buttons */

html[lang="ar"] .hero .actions{
  width:100%;

  direction:rtl;

  display:flex;
  justify-content:flex-start;
  gap:12px;
}


/* Keep archive note away from Arabic block */

html[lang="ar"] .hero-note{
  right:auto;
  left:5.7%;
  bottom:35px;

  direction:rtl;
  text-align:left;
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media(max-width:700px){

  html[lang="ar"] .hero-content{
    position:relative;

    top:auto;
    right:auto;
    bottom:auto;

    width:100%;
    max-width:none;

    padding:45px 7%;
  }

  html[lang="ar"] .hero .arabic-hero-title{
    font-size:clamp(56px,16vw,78px);
    white-space:normal;
  }

}