/* ===== Two Columns Full Width ===== */
.hp-two{
  width:100%;
  margin-top:26px;
  background:#fff;
}

.hp-two-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  padding:26px 16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch; /* key: makes both columns same height */
}

/* Make BOTH columns a fixed/consistent height (responsive) */
.hp-two-media,
.hp-two-content{
  height:clamp(320px, 45vw, 520px); /* adjust values to match your design */
  border-radius:18px;
  overflow:hidden;
  /* border:1px solid rgba(0,0,0,.08); */
}

/* Left panel look + center content like your screenshot */
.hp-two-content{
  background:#ffffff;       /* light grey panel like example */
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;    /* centers vertically */
  align-items:center;        /* centers horizontally */
  text-align:center;
}

/* Right image panel */
.hp-two-media{
  background:#ddd;
  position:relative;
}

/* Image must cover its panel */
.hp-two-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Typography tweaks (optional) */
.hp-two-title{
  margin:0 0 10px;
  font-size:clamp(20px, 2.4vw, 134px);
  line-height:1.1;
  font-weight:100;
}

.hp-two-sub{
  margin:0 0 16px;
  line-height:1.6;
  max-width:38ch;
}

/* Button-57 style adapted to your .hp-btn.hp-two-btn */
.hp-btn.hp-two-btn{
  position:relative;
  overflow:hidden;

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

  padding: 14px 20px;
  border-radius:999px;

  border:1px solid #18181a;
  background:#fff;
  color:#18181a;

  font-size:15px;
  line-height:1;
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;

  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* keep your existing arrow visible and “top layer” */
.hp-btn.hp-two-btn > span[aria-hidden="true"]{
  position:relative;
  z-index:10;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1), color 600ms cubic-bezier(0.48, 0, 0.12, 1);
}

/* treat the link text as “top text layer” (we can’t wrap it, so we shift color only) */
.hp-btn.hp-two-btn{
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1),
              border-color 600ms cubic-bezier(0.48, 0, 0.12, 1);
}

/* alternate text layer (like span:last-child in the demo) */
.hp-btn.hp-two-btn::before{
  content:"Προβολή"; /* change this to what you want */
  color:#fff;

  position:absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(225%);
  opacity:0;

  z-index:100;
  white-space:nowrap;

  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
}

/* the skew fill overlay (like :after in demo) */
.hp-btn.hp-two-btn::after{
  content:"";
  position:absolute;
  bottom:-50%;
  left:0;
  width:100%;
  height:100%;

  background:#000;
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(0);

  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index:50;
}

/* hover states */
.hp-btn.hp-two-btn:hover{
  border-color:#000;
  color:#fff; /* makes the main text turn white during fill */
}

.hp-btn.hp-two-btn:hover::after{
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(2);
}

.hp-btn.hp-two-btn:hover::before{
  transform: translateX(-50%) translateY(-50%);
  opacity:1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}

/* optional: move arrow a bit on hover */
.hp-btn.hp-two-btn:hover > span[aria-hidden="true"]{
  transform: translateX(4px);
  color:#fff;
}

/* focus */
.hp-btn.hp-two-btn:focus-visible{
  outline:3px solid rgba(0,0,0,.25);
  outline-offset:4px;
}

.hp-btn{
  position:relative;
  overflow:hidden;

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

  padding:14px 20px;
  border-radius:999px;

  border:1px solid #18181a;
  background:#fff;
  color:#18181a;

  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;

  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;

  transition: color 600ms cubic-bezier(0.48,0,0.12,1),
              border-color 600ms cubic-bezier(0.48,0,0.12,1);
}

/* arrow = top layer */
.hp-btn > span{
  position:relative;
  z-index:10;
  transition: transform 600ms cubic-bezier(0.48,0,0.12,1),
              color 600ms cubic-bezier(0.48,0,0.12,1);
}

/* alternate text layer */
.hp-btn::before{
  content:"Προβολή";   /* change text here */
  color:#fff;

  position:absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(225%);
  opacity:0;

  z-index:100;
  white-space:nowrap;

  transition: all 500ms cubic-bezier(0.48,0,0.12,1);
}

/* skew overlay */
.hp-btn::after{
  content:"";
  position:absolute;
  bottom:-50%;
  left:0;
  width:100%;
  height:100%;

  background:#000;

  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(0);

  transition: transform 600ms cubic-bezier(0.48,0,0.12,1);
  z-index:50;
}

/* hover animation */
.hp-btn:hover{
  color:#fff;
  border-color:#000;
}

.hp-btn:hover::after{
  transform: skewY(9.3deg) scaleY(2);
}

.hp-btn:hover::before{
  transform: translateX(-50%) translateY(-50%);
  opacity:1;
  transition: all 900ms cubic-bezier(0.48,0,0.12,1);
}

.hp-btn:hover > span{
  transform: translateX(4px);
  color:#fff;
}

/* focus accessibility */
.hp-btn:focus-visible{
  outline:3px solid rgba(0,0,0,.25);
  outline-offset:4px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-btn,
  .hp-btn::before,
  .hp-btn::after,
  .hp-btn > span{
    transition:none !important;
  }
}


/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-btn.hp-two-btn,
  .hp-btn.hp-two-btn::before,
  .hp-btn.hp-two-btn::after,
  .hp-btn.hp-two-btn > span[aria-hidden="true"]{
    transition:none !important;
  }
}


/* Mobile: stack + let height grow naturally */
@media (max-width: 900px){
  .hp-two-inner{
    grid-template-columns:1fr;
  }
  .hp-two-media,
  .hp-two-content{
    height:auto;
  }
  .hp-two-media{
    min-height:320px; /* keep image nice on mobile */
  }
}