/* DEUTSCH GO — PORTRAIT TABLET ONLY (NOT PHONE) */

/* =========================================================
   DEUTSCH GO — PORTRAIT HERO MASTER FIX
   ضع الملف بعد كل ملفات الهيدر والهيرو والكوليكشن.
   يعمل فقط عندما تكون الصفحة الرئيسية تحتوي على #deutschgoHero
   والشاشة Portrait.
========================================================= */

@media screen and (min-width: 769px) and (max-width: 1200px) and (orientation: portrait) {

  /* =======================================================
     1) HEADER: TRANSPARENT + ABSOLUTE OVER THE HERO
  ======================================================= */

  body:has(#deutschgoHero)
  .bg-white.sticky.top-0.w-full.z-30:has(.default_header),

  body:has(#deutschgoHero)
  .bg-white.sticky.top-0.w-full.z-30:has(.default_header_container) {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;

    width: 100% !important;

    z-index: 10000 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:has(#deutschgoHero) .default_header,
  body:has(#deutschgoHero) .default_header_container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #FFF8F1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:has(#deutschgoHero) .default_header a,
  body:has(#deutschgoHero) .default_header button,
  body:has(#deutschgoHero) .default_header svg {
    color: #FFF8F1 !important;
  }

  body:has(#deutschgoHero) .default_header svg path {
    stroke: currentColor !important;
  }

  body:has(#deutschgoHero) .default_header [class*="bg-white"],
  body:has(#deutschgoHero) .default_header button.bg-white {
    background: transparent !important;
  }

  body:has(#deutschgoHero) .default_header_logo::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 105px !important;
    height: 64px !important;

    transform: translate(-50%, -50%) !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(244, 197, 66, .18) 0%,
        rgba(244, 197, 66, .07) 38%,
        transparent 74%
      ) !important;

    filter: blur(10px) !important;
  }


  /* =======================================================
     2) HERO STARTS FROM THE TOP BEHIND THE HEADER
  ======================================================= */

  body:has(#deutschgoHero) #deutschgoHero {
    margin-top: 0 !important;
    padding-top: 0 !important;

    background: #081F2B !important;
  }

  body:has(#deutschgoHero)
  #deutschgoHero .deutschgo-hero__sticky {
    top: 0 !important;
    background: #081F2B !important;
  }


  /* =======================================================
     3) HIDE DESKTOP INTRO COMPLETELY
  ======================================================= */

  body:has(#deutschgoHero) .deutschgo-hero-intro,
  body:has(#deutschgoHero) #deutschgoHeroIntro,
  body:has(#deutschgoHero) #deutschgoDesktopIntro,
  body:has(#deutschgoHero) .deutschgo-desktop-intro,
  body:has(#deutschgoHero) .deutschgo-hero__intro--desktop {
    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform: none !important;
  }

  body:has(#deutschgoHero)
  #deutschgoHero .deutschgo-hero__sticky::after {
    content: none !important;
    display: none !important;
  }


  /* =======================================================
     4) HIDE DESKTOP COLLECTIONS
  ======================================================= */

  body:has(#deutschgoHero) #deutschgoCollectionsOverlay,
  body:has(#deutschgoHero) #deutschgoCollectionsAura,
  body:has(#deutschgoHero) .deutschgo-collections,
  body:has(#deutschgoHero) .deutschgo-collections-aura {
    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
  }


  /* =======================================================
     5) SHOW PHONE / PORTRAIT INTRO
  ======================================================= */

  body:has(#deutschgoHero) #deutschgoPhoneIntro {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100svh !important;

    z-index: 20 !important;

    visibility: visible;
  }

  body:has(#deutschgoHero)
  .deutschgo-phone-intro__content {
    left: 6% !important;
    right: 6% !important;

    bottom: 4.2vh !important;

    text-align: center !important;
  }

  body:has(#deutschgoHero)
  .deutschgo-phone-intro__title {
    font-size: clamp(38px, 7vw, 58px) !important;
  }

  body:has(#deutschgoHero)
  .deutschgo-phone-intro__text {
    width: min(76%, 410px) !important;

    font-size: clamp(12px, 1.8vw, 15px) !important;
    line-height: 1.5 !important;
  }

  body:has(#deutschgoHero)
  .deutschgo-phone-intro__button {
    min-width: 138px !important;
    height: 42px !important;

    margin-top: 13px !important;

    font-size: 11px !important;
  }


  /* =======================================================
     6) PORTRAIT LAYER — KEEP IT ABOVE OLD HERO CONTENT
  ======================================================= */

  body:has(#deutschgoHero) #deutschgoPortraitPhoneLayer {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 100 !important;

    overflow: hidden !important;

    background: #081F2B !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-frame {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
  }


  /* =======================================================
     7) PORTRAIT COLLECTIONS — CLEAN FINAL POSITIONING
  ======================================================= */

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-collections {
    direction: ltr !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-head {
    top: 3.2% !important;

    direction: ltr !important;
    text-align: center !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-head h2 {
    direction: ltr !important;
    unicode-bidi: isolate !important;

    justify-content: center !important;

    font-size: clamp(12px, 1.8vw, 14px) !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-head p {
    margin-top: 6px !important;

    font-size: clamp(9.5px, 1.4vw, 11px) !important;
    line-height: 1.2 !important;

    text-align: center !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item {
    width: 42% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    direction: ltr !important;
    text-align: center !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item p {
    width: 100% !important;
    min-height: 26px !important;

    margin: 0 0 4px !important;
    padding: 0 3px !important;

    font-size: clamp(9px, 1.35vw, 11px) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    text-align: center !important;

    transform: none !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item h3 {
    width: 100% !important;

    margin: 0 0 8px !important;

    font-size: clamp(13px, 1.8vw, 16px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-align: center !important;

    transform: none !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item a {
    width: clamp(112px, 18vw, 136px) !important;
    min-width: clamp(112px, 18vw, 136px) !important;
    height: 38px !important;

    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-align: center !important;

    transform: none !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item.n {
    top: 45.7% !important;
    left: 3% !important;
    right: auto !important;
    bottom: auto !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item.a {
    top: 45.7% !important;
    right: 3.8% !important;
    left: auto !important;
    bottom: auto !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item.g {
    top: 89.5% !important;
    left: 3.7% !important;
    right: auto !important;
    bottom: auto !important;
  }

  body:has(#deutschgoHero)
  #deutschgoPortraitPhoneLayer .dgpf-item.s {
    top: 89.5% !important;
    right: 3.8% !important;
    left: auto !important;
    bottom: auto !important;
  }


  /* =======================================================
     8) MENU / DIALOG MUST STAY ABOVE THE TRANSPARENT HEADER
  ======================================================= */

  body [role="dialog"],
  body [data-headlessui-portal],
  body .fixed.inset-0,
  body .fixed.inset-y-0,
  body .fixed.z-40,
  body .fixed.z-50 {
    z-index: 20000 !important;
  }
}

/* =========================================================
   DEUTSCH GO — PORTRAIT INTRO + COLLECTIONS
   Standalone portrait-only version
   Tuned for frame 40 at 720 × 1280
========================================================= */

#deutschgoPortraitIntro,
#deutschgoPortraitCollectionsAura,
#deutschgoPortraitCollectionsOverlay {
  display: none;
}

@media screen and (min-width: 769px) and (max-width: 1200px) and (orientation: portrait) {

  /* Hide desktop overlays only on portrait */
  #deutschgoHero .deutschgo-hero-intro,
  #deutschgoHero #deutschgoHeroIntro,
  #deutschgoHero #deutschgoDesktopIntro,
  #deutschgoHero #deutschgoCollectionsOverlay,
  #deutschgoHero #deutschgoCollectionsAura,
  #deutschgoHero .deutschgo-collections,
  #deutschgoHero .deutschgo-collections-aura {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #deutschgoHero .deutschgo-hero__sticky {
    position: sticky !important;
    top: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

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

  #deutschgoPortraitIntro {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;

    z-index: 12 !important;

    overflow: hidden !important;
    pointer-events: none !important;

    opacity: 1;
    visibility: visible;

    will-change: opacity;
  }

  .dg-portrait-intro__smoke {
    position: absolute;

    left: 50%;
    bottom: 8.5vh;

    width: 124%;
    height: 31%;

    transform: translateX(-50%) scale(1.02);

    z-index: 1;
    pointer-events: none;

    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(18, 59, 74, .58) 0%,
        rgba(18, 59, 74, .40) 24%,
        rgba(8, 31, 43, .24) 43%,
        rgba(8, 31, 43, .10) 58%,
        transparent 76%
      ),
      radial-gradient(
        ellipse at 42% 72%,
        rgba(28, 93, 112, .22) 0%,
        rgba(18, 59, 74, .12) 38%,
        transparent 72%
      );

    filter: blur(22px);

    -webkit-mask-image:
      radial-gradient(
        ellipse at center,
        #000 0%,
        rgba(0,0,0,.95) 36%,
        rgba(0,0,0,.62) 58%,
        transparent 82%
      );

    mask-image:
      radial-gradient(
        ellipse at center,
        #000 0%,
        rgba(0,0,0,.95) 36%,
        rgba(0,0,0,.62) 58%,
        transparent 82%
      );

    opacity: .98;
    will-change: opacity, transform;
  }

  .dg-portrait-intro__content {
    position: absolute;

    left: 6%;
    right: 6%;
    bottom: 4.2vh;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    direction: ltr;
  }

  .dg-portrait-intro__title-wrap,
  .dg-portrait-intro__body-wrap {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    will-change: transform, opacity;
  }

  .dg-portrait-intro__title {
    margin: 0;

    color: #FFF8F1;

    font-size: clamp(38px, 7vw, 58px);
    line-height: .94;
    font-weight: 900;
    letter-spacing: -.045em;

    text-shadow:
      0 7px 22px rgba(0,0,0,.34),
      0 0 14px rgba(255,248,241,.05);
  }

  .dg-portrait-intro__title span {
    color: #F4C542;
  }

  .dg-portrait-intro__text {
    width: min(76%, 410px);

    margin: 11px auto 0;

    color: rgba(255,248,241,.91);

    font-size: clamp(12px, 1.8vw, 15px);
    line-height: 1.5;
    font-weight: 500;

    text-shadow: 0 4px 14px rgba(0,0,0,.34);
  }

  .dg-portrait-intro__button {
    pointer-events: auto !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 138px;
    height: 42px;

    margin-top: 13px;
    padding: 0 20px;

    border: 0;
    border-radius: 999px;

    background: #F4C542;
    color: #081F2B;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;

    box-shadow:
      0 13px 26px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.34);

    cursor: pointer;
  }

  /* =======================================================
     COLLECTIONS AURA
  ======================================================= */

  #deutschgoPortraitCollectionsAura {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    z-index: 13 !important;

    pointer-events: none !important;
    overflow: hidden !important;

    opacity: 0;
    visibility: hidden;

    will-change: opacity;
  }

  #deutschgoPortraitCollectionsAura::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -10%;

    width: 120%;
    height: 44%;

    transform: translateX(-50%);

    background:
      radial-gradient(
        ellipse at center,
        rgba(244,197,66,.10) 0%,
        rgba(28,93,112,.08) 32%,
        rgba(18,59,74,.05) 52%,
        transparent 76%
      );

    filter: blur(24px);
  }

  /* =======================================================
     COLLECTIONS OVERLAY
  ======================================================= */

  #deutschgoPortraitCollectionsOverlay {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 16 !important;

    pointer-events: none !important;

    opacity: 0;
    visibility: hidden;

    direction: ltr !important;

    will-change: opacity, transform;
  }

  .dg-portrait-collections__header {
    position: absolute;

    top: 3.2%;
    left: 50%;

    width: calc(100% - 64px);

    transform: translateX(-50%);

    text-align: center;
    direction: ltr !important;
  }

  .dg-portrait-collections__heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 7px 15px;

    border: 1px solid rgba(255,248,241,.16);
    border-radius: 999px;

    background: rgba(8,31,43,.62);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    color: #FFF8F1;

    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;

    white-space: nowrap;
    direction: ltr !important;
    unicode-bidi: isolate;
  }

  .dg-portrait-collections__heading span {
    color: #F4C542;
  }

  .dg-portrait-collections__subheading {
    margin: 6px 0 0;

    color: rgba(255,248,241,.72);

    font-size: clamp(9.5px, 1.4vw, 11px);
    line-height: 1.2;
    font-weight: 600;

    direction: ltr !important;
  }

  .dg-portrait-collections__item {
    position: absolute;

    width: 42%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    direction: ltr !important;

    opacity: 0;
    transform: translate3d(0,14px,0) scale(.98);

    will-change: opacity, transform;
  }

  /* Exact placement for frame 40 — 720 × 1280 */
  .dg-portrait-collections__item--netzwerk {
    left: 3%;
    top: 45.7%;
  }

  .dg-portrait-collections__item--aspekte {
    right: 3.8%;
    top: 45.7%;
  }

  .dg-portrait-collections__item--grammatik {
    left: 3.7%;
    top: 89.5%;
  }

  .dg-portrait-collections__item--spektrum {
    right: 3.8%;
    top: 89.5%;
  }

  .dg-portrait-collections__description {
    width: 100%;
    min-height: 26px;

    margin: 0 0 4px;
    padding: 0 3px;

    color: rgba(255,248,241,.72);

    font-size: clamp(9px, 1.35vw, 11px);
    line-height: 1.3;
    font-weight: 500;

    text-align: center;
  }

  .dg-portrait-collections__name {
    width: 100%;

    margin: 0 0 8px;

    color: #FFF8F1;

    font-size: clamp(13px, 1.8vw, 16px);
    line-height: 1.2;
    font-weight: 800;

    text-align: center;
  }

  .dg-portrait-collections__button {
    pointer-events: auto !important;

    width: clamp(112px, 18vw, 136px);
    min-width: clamp(112px, 18vw, 136px);
    height: 38px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    background: #F4C542;
    color: #081F2B;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .055em;

    box-shadow:
      0 9px 22px rgba(8,31,43,.26),
      inset 0 1px 0 rgba(255,255,255,.36);
  }
}

/* =========================================================
   PORTRAIT TABLET ONLY — HERO LIFT
========================================================= */
@media screen and (min-width: 769px) and (max-width: 1200px) and (orientation: portrait) {
  #deutschgoHero {
    transform: translateY(-1vh) !important;
    margin-bottom: -1vh !important;
  }
}