/* =========================================================
   = Powerhouse Page – Base / Variables
   ========================================================= */

:root {
  --ph-bg: rgb(12, 12, 12);
  --ph-text: rgb(249, 250, 253);
  --ph-border: rgb(249, 250, 253);
}

/* =========================================================
   = Page Wrapper & Lines (Top / Bottom)
   ========================================================= */

.powerhouse-page {
  background-color: var(--ph-bg);
  color: var(--ph-text);
  padding: 4rem 0;
}

#main.powerhouse-page {
  position: relative; /* ώστε τα ::before/::after να “δένουν” στο main */
}

#main.powerhouse-page::before,
#main.powerhouse-page::after {
  content: "";
  position: absolute;
  height: 4px;
  background-color: var(--ph-border);
  width: 100vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#main.powerhouse-page::before {
  top: 0;
}

#main.powerhouse-page::after {
  bottom: 0;
}

/* =========================================================
   = Title / Header Section
   ========================================================= */

.powerhouse-page .title-powerhouse {
  position: relative;
}

.powerhouse-page h1 {
  font-size: 5rem;
  line-height: 0.8;
  color: var(--ph-text);
}

.powerhouse-page .title-powerhouse p {
  font-style: italic;
  font-size: 1.3rem;
  margin-top: 1rem;
  line-height: 1.2;
}

.powerhouse-page .title-powerhouse .pwc-logo {
  position: absolute;
  top: 0;
  right: 40px;
}

.powerhouse-page .title-powerhouse img {
  width: 150px;
}

/* =========================================================
   = Shared Grid Layout (Hero & Articles)
   ========================================================= */

.powerhouse-page .powerhouse-hero-container .grid,
.powerhouse-page .powerhouse-articles .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 4rem;
}

.powerhouse-page .powerhouse-hero-container .grid {
  border-bottom: 4px solid var(--ph-border);
}

.powerhouse-page .grid .item {
  padding-bottom: 0;
  border-bottom: none;
}

/* =========================================================
   = Hero Main Item (Mobile-first)
   ========================================================= */

/* Base (mobile): κανονικό item  */
.powerhouse-page .powerhouse-hero-container .grid .item.main {
  /* default συμπεριφορά */
}

/* Από tablets / μικρά desktop και πάνω: height 100%, gradient & overlay content */
@media (min-width: 993px) {
  .powerhouse-page .grid .item.main .item-image,
  .powerhouse-page .grid .item.main .item-image a {
    height: 100%;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .item-image {
    -webkit-mask-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(60%, black),
      to(transparent)
    );
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(60%, black),
      to(transparent)
    );
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .item-content {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
  }
}

/* Από μεγάλα desktop και πάνω: main πιάνει 2 στήλες & 2 σειρές */
@media (min-width: 1201px) {
  .powerhouse-page .powerhouse-hero-container .grid .item.main {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* =========================================================
   = Hero Typography / Colors
   ========================================================= */

.powerhouse-page .powerhouse-hero-container .grid .item h2,
.powerhouse-page .powerhouse-hero-container .grid .item .category {
  color: var(--ph-text);
}

.powerhouse-page .powerhouse-hero-container .grid .item.main h2 {
  font-size: 3rem;
  max-width: 25ch;
}

.powerhouse-page .powerhouse-hero-container .grid .item.main .category {
  font-size: 1.8rem;
}

/* =========================================================
   = Articles Grid Styles
   ========================================================= */

.powerhouse-page .powerhouse-articles .item {
  background-color: var(--ph-text);
  gap: 0;
}

.powerhouse-page .powerhouse-articles .item-image a {
  aspect-ratio: 4 / 3;
}

.powerhouse-page .powerhouse-articles .item .item-content {
  padding: 2rem;
}

/* =========================================================
   = Responsive – Large tablets / Small desktops
   = (max-width: 1200px)
   ========================================================= */

@media (max-width: 1200px) {
  .powerhouse-page {
    padding: 3.5rem 0;
  }

  .powerhouse-page h1 {
    font-size: 7rem;
  }

  .powerhouse-page .title-powerhouse .pwc-logo {
    right: 40px;
  }

  .powerhouse-page .powerhouse-hero-container .grid,
  .powerhouse-page .powerhouse-articles .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* main hero item: πιάνει όλο το πλάτος των 2 στηλών */
  .powerhouse-page .powerhouse-hero-container .grid .item.main {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* =========================================================
   = Responsive – Tablets
   = (max-width: 992px)
   ========================================================= */

@media (max-width: 992px) {
  .powerhouse-page {
    padding: 3rem 0;
  }

  .powerhouse-page h1 {
    font-size: 5rem;
  }

  .powerhouse-page .title-powerhouse p {
    font-size: 1.6rem;
  }

  .powerhouse-page .title-powerhouse .pwc-logo img {
    width: 120px;
  }

  .powerhouse-page .powerhouse-hero-container .grid,
  .powerhouse-page .powerhouse-articles .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main h2 {
    font-size: 2.4rem;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .category {
    font-size: 1.4rem;
  }

  .powerhouse-page .powerhouse-articles .item .item-content {
    padding: 1.5rem;
  }
}

/* =========================================================
   = Responsive – Mobiles
   = (max-width: 768px)
   ========================================================= */

@media (max-width: 768px) {
  .powerhouse-page {
    padding: 2.5rem 0;
  }

  .powerhouse-page h1 {
    font-size: 3.2rem;
    line-height: 1;
  }

  .powerhouse-page .title-powerhouse {
    text-align: center;
  }

  .powerhouse-page .title-powerhouse p {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }

  /* logo να κάτσει από κάτω / κέντρο για mobile */
  .powerhouse-page .title-powerhouse .pwc-logo {
    position: static;
    margin: 1.5rem auto 0;
  }

  .powerhouse-page .title-powerhouse img {
    width: 110px;
  }

  .powerhouse-page .powerhouse-hero-container .grid,
  .powerhouse-page .powerhouse-articles .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 3rem;
  }

  /* main hero item: κανονικό flow στη μία στήλη
     (override οποιοδήποτε span από πάνω) */
  .powerhouse-page .powerhouse-hero-container .grid .item.main {
    grid-column: auto;
    grid-row: auto;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .item-content {
    position: static;
    padding: 0;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .item-image {
    -webkit-mask-image: none;
    mask-image: none; /* πιο “καθαρή” εικόνα σε μικρές οθόνες */
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main h2 {
    font-size: 2rem;
    max-width: 100%;
  }

  .powerhouse-page .powerhouse-hero-container .grid .item.main .category {
    font-size: 1.2rem;
  }

  .powerhouse-page .powerhouse-articles .item .item-content {
    padding: 1.5rem;
  }
}

/* =========================================================
   = Responsive – Small Mobiles
   = (max-width: 480px)
   ========================================================= */

@media (max-width: 480px) {
  .powerhouse-page {
    padding: 2rem 0;
  }

  .powerhouse-page h1 {
    font-size: 2.6rem;
  }

  .powerhouse-page .title-powerhouse p {
    font-size: 1.3rem;
  }

  .powerhouse-page .powerhouse-hero-container .grid,
  .powerhouse-page .powerhouse-articles .grid {
    gap: 1.25rem;
  }

  .powerhouse-page .powerhouse-articles .item .item-content {
    padding: 1.25rem;
  }
}