/* =========================================================
   RAW TAKES — KONTAKT (jak Offer) — bez buttona
========================================================= */

:where(.rawtakes-kontakt-page){
  --line: 1.5px;
  --text-dim: #666;

  --pad-x: 20px;
  --max-w: 1680px; /* jeśli chcesz wężej/szerzej — zmień tylko to */

  /* nic nie dotyka header/footer */
}

/* ---------------------------------------------------------
   CONTAINER ALIGN (TYLKO kontakt) — jak Offer
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .container{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   HERO (jak offer-hero)
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .kontakt-hero{
  padding: 70px 0 36px;
}

:where(.rawtakes-kontakt-page) .kontakt-hero h1{
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -3px;
  line-height: 1;
  margin: 0;
}

/* ---------------------------------------------------------
   BODY SECTION (oddech jak grid w Offer)
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .kontakt-section{
  padding: 18px 0 90px;
}

/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .kontakt-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center; /* wyśrodkowanie danych i mapy */
}

/* ---------------------------------------------------------
   DATA
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .kontakt-data{
  display: flex;
  flex-direction: column;
  gap: 26px;
}

:where(.rawtakes-kontakt-page) .info-group label{
  display: block;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}

:where(.rawtakes-kontakt-page) .info-group p{
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
}

:where(.rawtakes-kontakt-page) .info-group a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* info o telefonie przed wizytą */
:where(.rawtakes-kontakt-page) .kontakt-warning{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dim);
}

/* ---------------------------------------------------------
   MAP
--------------------------------------------------------- */
:where(.rawtakes-kontakt-page) .kontakt-map{
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 520px;
  border: var(--line) solid #000;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

:where(.rawtakes-kontakt-page) .kontakt-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------------------------------------------------------
   RWD
--------------------------------------------------------- */
@media (max-width: 1024px){
  :where(.rawtakes-kontakt-page) .kontakt-grid{
    gap: 40px;
  }
}

@media (max-width: 900px){
  :where(.rawtakes-kontakt-page) .kontakt-hero{
    padding: 60px 0 28px;
  }

  :where(.rawtakes-kontakt-page) .kontakt-section{
    padding: 12px 0 70px;
  }

  :where(.rawtakes-kontakt-page) .kontakt-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  :where(.rawtakes-kontakt-page) .kontakt-map{
    aspect-ratio: 16 / 9;
    min-height: 280px;
  }

  :where(.rawtakes-kontakt-page) .info-group p,
  :where(.rawtakes-kontakt-page) .kontakt-warning{
    font-size: 18px;
  }
}

/* =========================================================
   KONTAKT — RAMKA Z CELOWNIKIEM (LEWA KOLUMNA)
========================================================= */

:where(.rawtakes-kontakt-page) .kontakt-data{
  --frame-border: 1.5px;
  --frame-color: #e5e5e5;

  --corner-l: 16px;      /* długość rogu */
  --corner-s: 1.5px;     /* grubość rogu */
  --corner-inset: 18px;  /* odsunięcie rogów od ramki */

  position: relative;
  padding: 46px;
  border: var(--frame-border) solid var(--frame-color);
  background: transparent;
  min-height: 420px;
  box-sizing: border-box;
}

/* 4 narożniki (mniejsze) */
:where(.rawtakes-kontakt-page) .kontakt-data::after{
  content:"";
  position:absolute;
  inset: var(--corner-inset);
  pointer-events:none;

  background:
    linear-gradient(#000,#000) left top / var(--corner-l) var(--corner-s) no-repeat,
    linear-gradient(#000,#000) left top / var(--corner-s) var(--corner-l) no-repeat,

    linear-gradient(#000,#000) right top / var(--corner-l) var(--corner-s) no-repeat,
    linear-gradient(#000,#000) right top / var(--corner-s) var(--corner-l) no-repeat,

    linear-gradient(#000,#000) left bottom / var(--corner-l) var(--corner-s) no-repeat,
    linear-gradient(#000,#000) left bottom / var(--corner-s) var(--corner-l) no-repeat,

    linear-gradient(#000,#000) right bottom / var(--corner-l) var(--corner-s) no-repeat,
    linear-gradient(#000,#000) right bottom / var(--corner-s) var(--corner-l) no-repeat;
}

/* content nad cornerami */
:where(.rawtakes-kontakt-page) .kontakt-data > *{
  position: relative;
  z-index: 1;
}

/* mobile */
@media (max-width:900px){
  :where(.rawtakes-kontakt-page) .kontakt-data{
    padding: 32px 26px;
    min-height: 0;

    --corner-l: 12px;
    --corner-s: 1.5px;
    --corner-inset: 14px;
  }
}