/* =========================================================
   PETRO — HOME SECTION 03 / ABOUT
   CLEAN REFERENCE BUILD
   ========================================================= */

.petro-home [data-home-section="03"]{
  --s03-gold:#ddb17f;
  --s03-white:#f4f5f6;
  --s03-muted:#b7bdc3;

  position:relative;
  width:100%;
  padding:16px 0 0;
  background:transparent;
}

.petro-home [data-home-section="03"] *,
.petro-home [data-home-section="03"] *::before,
.petro-home [data-home-section="03"] *::after{
  box-sizing:border-box;
}

/* ===== OUTER FRAME ===== */

.petro-home [data-home-section="03"] .petro-about__frame{
  position:relative;
  direction:ltr;
  width:min(1380px, calc(100% - 64px));
  height:500px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  overflow:hidden;

  border-block:1px solid transparent;


  background:rgba(24,29,33,.28);
}

/* Paint both frame edges above the grid; preserve the existing border geometry. */
.petro-home [data-home-section="03"] .petro-about__frame::before,
.petro-home [data-home-section="03"] .petro-about__frame::after{
  content:"";
  position:absolute;
  z-index:1;
  inset-inline:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,161,108,.22) 18%,rgba(221,177,127,.74) 50%,rgba(198,161,108,.22) 82%,transparent);
  pointer-events:none;
}
.petro-home [data-home-section="03"] .petro-about__frame::before{top:0}
.petro-home [data-home-section="03"] .petro-about__frame::after{bottom:0}

/* ===== LEFT CONTENT ===== */

.petro-home [data-home-section="03"] .petro-about__content{
  grid-column:1;
  grid-row:1;

  min-width:0;
  height:500px;

  padding:28px 32px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  direction:rtl;
  text-align:center;

  border-right:1px solid rgba(255,255,255,.045);

  background:
    linear-gradient(
      180deg,
      rgba(29,34,38,.48),
      rgba(25,30,34,.40)
    );
}

.petro-home [data-home-section="03"] .petro-about__copy{
  width:100%;
  max-width:660px;
  margin:0 auto;
}

.petro-home [data-home-section="03"] .petro-about__kicker{
  width:max-content;

  margin:0 auto 6px;
  padding:0 0 5px;

  color:var(--s03-gold);

  font-size:13px;
  font-weight:600;
  line-height:1.5;

  border-bottom:1px solid rgba(221,177,127,.40);
}

.petro-home [data-home-section="03"] .petro-about__title{
  margin:0 0 8px;

  color:var(--s03-white);

  font-size:clamp(28px, 2.64vw, 38px);
  font-weight:600;
  line-height:1.3;

  letter-spacing:-.6px;
}

.petro-home [data-home-section="03"] .petro-about__title span{
  display:block;
}

.petro-home [data-home-section="03"] .petro-about__title strong{
  color:var(--s03-gold);
  font-weight:650;
}

.petro-home [data-home-section="03"] .petro-about__description{
  margin:0 auto;

  max-width:610px;

  color:var(--s03-muted);

  font-size:12.5px;
  font-weight:400;
  line-height:1.9;

  text-align:justify;
  text-align-last:center;
}

/* ===== FOUR CARDS ===== */

.petro-home [data-home-section="03"] .petro-about__cards{
  width:100%;

  margin:14px 0 0;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;

  direction:ltr;
}

.petro-home [data-home-section="03"] .petro-about-card{
  height:104px;
  min-width:0;

  padding:9px 5px;

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

  direction:rtl;
  text-align:center;

  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;

  background:
    linear-gradient(
      180deg,
      rgba(41,47,51,.55),
      rgba(28,33,37,.46)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.petro-home [data-home-section="03"] .petro-about-card:hover{
  transform:translateY(-2px);

  border-color:rgba(221,177,127,.38);

  background:
    linear-gradient(
      180deg,
      rgba(46,52,56,.64),
      rgba(31,36,40,.54)
    );
}

.petro-home [data-home-section="03"] .petro-about-card__icon{
  width:34px;
  height:34px;

  margin:0 auto 6px;

  display:grid;
  place-items:center;

  color:var(--s03-gold);
}

.petro-home [data-home-section="03"] .petro-about-card__icon svg{
  width:30px;
  height:30px;

  display:block;

  fill:none;
  stroke:currentColor;

  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.petro-home [data-home-section="03"] .petro-about-card h3{
  margin:0 0 2px;

  color:#f1f3f4;

  font-size:11.5px;
  font-weight:600;
  line-height:1.5;

  white-space:nowrap;
}

.petro-home [data-home-section="03"] .petro-about-card p{
  margin:0;

  color:#aeb5ba;

  font-size:9px;
  font-weight:400;
  line-height:1.5;

  white-space:nowrap;
}

/* ===== CTA ===== */

.petro-home [data-home-section="03"] .petro-about__action{
  width:100%;

  margin-top:14px;

  display:flex;
  justify-content:center;

  direction:rtl;
}

.petro-home [data-home-section="03"] .petro-about__button{
  width:166px;
  height:42px;
  flex-shrink:0;

  padding:0 18px;

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

  gap:14px;

  color:var(--s03-gold);

  border:1px solid rgba(221,177,127,.62);
  border-radius:7px;

  background:
    linear-gradient(
      180deg,
      rgba(42,47,51,.72),
      rgba(28,33,37,.72)
    );

  font-size:12px;
  font-weight:600;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.petro-home [data-home-section="03"] .petro-about__button:hover{
  color:#171a1d;
  background:#ddb17f;
  transform:translateY(-2px);
}

/* ===== RIGHT IMAGE ===== */

.petro-home [data-home-section="03"] .petro-about__media{
  grid-column:2;
  grid-row:1;

  position:relative;

  min-width:0;
  width:100%;
  height:500px;

  overflow:hidden;

  background:#171c20;
}

.petro-home [data-home-section="03"] .petro-about__media img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:62% center;
}

.petro-home [data-home-section="03"] .petro-about__media-overlay{
  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(22,27,31,.26) 0%,
      rgba(22,27,31,.08) 25%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(10,14,17,.02),
      rgba(10,14,17,.10)
    );
}

/* Desktop optical offsets; preserve the surrounding layout. */
@media (min-width:1051px){
  .petro-home [data-home-section="03"] .petro-about__kicker{
    position:relative;
    top:-19px;
  }

  .petro-home [data-home-section="03"] .petro-about__action{
    position:relative;
    top:19px;
  }
}

/* ===== TABLET ===== */

@media (max-width:1050px){

  .petro-home [data-home-section="03"] .petro-about__frame{
    width:calc(100% - 64px);
    height:auto;

    grid-template-columns:1fr;
  }

  .petro-home [data-home-section="03"] .petro-about__media{
    grid-column:1;
    grid-row:1;

    height:390px;
  }

  .petro-home [data-home-section="03"] .petro-about__content{
    grid-column:1;
    grid-row:2;

    height:auto;

    border-right:0;
    border-top:1px solid rgba(255,255,255,.07);
  }

}

/* ===== MOBILE ===== */

@media (max-width:650px){

  .petro-home [data-home-section="03"] .petro-about__frame{
    width:calc(100% - 28px);
  }

  .petro-home [data-home-section="03"] .petro-about__media{
    height:300px;
  }

  .petro-home [data-home-section="03"] .petro-about__content{
    padding:28px 18px;
  }

  .petro-home [data-home-section="03"] .petro-about__title{
    font-size:29px;
  }

  .petro-home [data-home-section="03"] .petro-about__description{
    text-align:right;
    text-align-last:auto;
  }

  .petro-home [data-home-section="03"] .petro-about__cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}