/* =========================================================
   3tonis – FINAL CSS (based on style orig.css + upgrades)
   - Keeps HERO + CONTACT colors/styles
   - Adds: smaller gaps, image crop, mobile text>image order
   ========================================================= */

/* Source base: style orig.css  [oai_citation:0‡style orig.css](sediment://file_00000000f21071f4b07d230cad28170c)
   Previous broken variant: style.css  [oai_citation:1‡style.css](sediment://file_000000009b8c720a8e351f44a5863ac3) */

/* =========================
   VARIABLES
   ========================= */

:root{
  --brand:#5C120D;
  --text:#1a1a1a;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --soft:#f6f4f4;

  /* spacing (tighter than original) */
  --container-pad-y: 3.25rem;
  --container-pad-x: 1.5rem;
  --section-gap: 3.25rem;      /* was 5rem */

  /* grid */
  --grid-gap: 2.25rem;         /* was 3rem */

  /* image crop */
  --ill-radius: 14px;
  --crop-h-desktop: 320px;     /* adjust if needed */
  --crop-h-mobile: 220px;      /* adjust if needed */
  --crop-y: 55%;               /* trims top/bottom uniformly */
}

/* =========================
   RESET / BASE
   ========================= */

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

img{ max-width:100%; height:auto; }

/* =========================
   HERO
   (kept as original)
   ========================= */

header.hero{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:6rem var(--container-pad-x);
}

.hero img{
  max-width:260px;
  margin-bottom:2rem;
}

/* =========================
   CONTAINER + SECTIONS
   ========================= */

.container{
  max-width:1100px;
  margin:0 auto;
  padding:var(--container-pad-y) var(--container-pad-x);
}

.section{
  margin-bottom:var(--section-gap);
}

/* =========================
   TYPOGRAPHY
   (kept close to your base, but safe)
   ========================= */

h1{ font-size:2.6rem; margin:0 0 1rem 0; }
h2{ font-size:2rem; margin:0 0 1rem 0; }

p{ margin:0 0 1rem 0; }

/* =========================
   CARDS / BOXES
   (kept as original)
   ========================= */

.card{
  background:var(--brand);
  color:#fff;
  padding:2.5rem;
  border-radius:14px;
}

/* =========================
   GRID BLOCKS (desktop)
   ========================= */

/* Original .grid preserved */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--grid-gap);
  align-items:center;
}

/* NEW: use .block for your info blocks (text + image) */
.block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--grid-gap);
  align-items:center;

  /* tighter vertical gap between blocks */
  margin-bottom:2.5rem;
}

/* Optional: if you want alternating layout on desktop
   add class="block is-reverse" to a block */
.block.is-reverse .text{ order:2; }
.block.is-reverse .media{ order:1; }

/* =========================
   IMAGE CROP (fixes tall images + big empty top/bottom)
   ========================= */

/* Wrap <img> inside <div class="image-crop block__media"> ... */
.image-crop{
  height:var(--crop-h-desktop);
  overflow:hidden;
  border-radius:var(--ill-radius);
  /* prevents tiny gaps below images in some browsers */
  line-height:0;
}

/* Image inside crop area */
.image-crop img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center var(--crop-y);
}

/* Keep your original "ill" class compatible (if used in HTML) */
img.ill{
  width:100%;
  border-radius:var(--ill-radius);
  display:block;
}

/* If you still use <img class="ill"> without wrapper,
   at least remove bottom inline gap */
img.ill{ vertical-align:middle; }

/* =========================
   CONTACT (kept as original)
   ========================= */

.contact{
  background:var(--soft);
}

.contact img{
  max-width:220px;
  border-radius:50%;
}

/* =========================
   FOOTER (kept as original)
   ========================= */

footer{
  text-align:center;
  padding:2rem var(--container-pad-x);
  color:var(--muted);
}

/* =========================
   RESPONSIVE
   - Mobile: ALWAYS Text > Image
   ========================= */

@media (max-width:900px){
  /* original behavior for .grid */
  .grid{ grid-template-columns:1fr; }

  /* blocks become single column */
  .block{
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-bottom:2rem;
  }

  /* ALWAYS text first, image second */
  .text{ order:1; }
  .media{ order:2; }

  /* crop height smaller on mobile */
  .image-crop{ height:var(--crop-h-mobile); }

  /* slightly tighter sections/padding on mobile */
  .container{
    padding:2.25rem 1.25rem;
  }

  /* if you want smaller body text on mobile globally, uncomment:
  body{ font-size: 15px; }
  */
}