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

/* ============================
   HERO CENTER (true center)
============================ */

.d25-home.d25-hero{
  --pad: clamp(2rem, 6vh, 4.5rem);

  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding: var(--pad) 1rem;
  padding-top: calc(var(--pad) + 3.75rem);
  padding-bottom: calc(var(--pad) + 1.25rem);

  text-align:center;
}

/* logo (KEEP ORIGINAL SIZE) */
.d25-home .d25-logo{ margin-bottom: clamp(2.25rem, 5vh, 3rem); }
.d25-home .d25-logo-img img{
  width: clamp(12rem, 21vw, 18rem);
  height:auto;
}

/* search */
.d25-home .d25-search-host{
  width:100%;
  display:flex;
  justify-content:center;
}
.d25-home .d25-search{
  width:100%;
  max-width: min(75%, 53.75rem);
}
.d25-home .d25-search-wrap{ min-height: 4.5rem; }

@media (max-width:45rem){
  .d25-home .d25-search{ max-width:100%; }
}

/* language */
.d25-home-lang{
  margin-top:.625rem;
  display:flex;
  justify-content:center;
  gap:1px;
}
.d25-home-lang-btn{
  border:0;
  background:transparent;
  padding:.375rem .5rem;
  color:var(--grey-05);
  border-radius:var(--radius-pill);
  font-size:.9rem;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.d25-home-lang-btn:hover{ background:var(--surface); color:var(--grey-08); }
.d25-home-lang-btn.is-active{ color:var(--grey-08); font-weight:var(--w-medium); }

/* ==========================================================
   HOME · Explore
   Cloud now supports 2 rows (9 + 7) via JS
   ========================================================== */

.d25-explore{
  margin-top:18px;
  position:relative;
  text-align:center;
}

/* CTA */
.d25-explore__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--grey-08);
  text-decoration:none;
  padding:6px 2px;
}
.d25-explore__link:hover .d25-explore__text{ color:var(--grey-10); }

.d25-explore__arrow{
  width:14px;
  height:14px;
  opacity:.7;
  transform:translateY(1px);
}

/* cloud wrapper */
.d25-exploreCloud{
  --ico: 40px;
  --gap: 8px;

  width:max-content;
  max-width:92vw;
  margin:4px auto 0;

  display:flex;           /* rows stacked (created by JS) */
  flex-direction:column;
  gap:var(--gap);

  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

/* show on hover/focus */
.d25-explore:hover .d25-exploreCloud,
.d25-explore:focus-within .d25-exploreCloud{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* touch devices: always visible */
@media (hover:none){
  .d25-exploreCloud{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* rows */
.d25-exploreRow{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:0 auto;
  width:max-content;
}

/* icon buttons */
.d25-exploreCloud__a{
  width:var(--ico);
  height:var(--ico);
  display:grid;
  place-items:center;
  text-decoration:none;
  transition:transform .18s ease;
}
.d25-exploreCloud__ico{
  width:var(--ico);
  height:var(--ico);
  color:var(--grey-02);
}
.d25-exploreCloud__a:hover{ transform:translateY(-8px); }

/* ==========================================================
   HOME · Mobile (ONLY ONE BLOCK)
   - hide big hero logo (header already has it)
   - hide cloud on mobile (as per your intent)
   - reduce searchbar height + inner element size (mobile only)
   - keep hero centered (no “too down” push)
   ========================================================== */

@media (max-width:520px){

  .d25-home .d25-logo{ display:none; }
  .d25-exploreCloud{ display:none; }

  .d25-home.d25-hero{
    min-height: calc(100svh - var(--header-h, 72px));
    justify-content: center;
    padding-top: 1vh;
  }

  .d25-home .d25-search{ margin-top: 0; }

  .d25-home-lang{ margin-top: 10px; }
  .d25-home .d25-explore{ margin-top: 16px; }

  .d25-home .d25-search-wrap{ min-height: 3.25rem; }

  .d25-home .d25-search-wrap input{
    height: 3rem;
    font-size: 15px;
  }
  .d25-home .d25-search-wrap input::placeholder{
    font-size: 15px;
  }

  .d25-home .d25-search-wrap button{
    height: 3rem;
    width: 3rem;
  }

  .d25-home .d25-search-wrap svg{
    width: 18px;
    height: 18px;
  }
}