/**
 * EGYEDI STÍLUSOK – ezt a fájlt közvetlenül a Joomla adminban szerkesztheted.
 *
 * Útvonal az adminban:
 * Rendszer → Webhelysablonok → Gépi Földmunka → Fájlok
 * → assets → css → custom.css
 *
 * A fájl az alap stíluslap UTÁN töltődik be, ezért az ide írt szabályok
 * felülírják az alapbeállításokat. Mentés után a fájl módosítási ideje
 * automatikusan bekerül az URL-be, így nem kell a böngésző gyorsítótárával
 * küzdeni.
 */

:root {
  /* Példa: --radius: 0px; */
}

/* ==========================================================================
   CIKKOLDALI FEKETE DESIGNHÁTTÉR MAGASSÁGÁNAK KÜLÖN KEZELÉSE
   A fő kép helyzete nem változik, csak a mögötte lévő háttér ér véget feljebb.
   ========================================================================== */

.fold-service-article .article-hero {
  position: relative;
  background: transparent !important;
}

.fold-service-article .article-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 150px;
  left: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      transparent 0 46%,
      rgba(245, 180, 0, .08) 46.2% 46.45%,
      transparent 46.7%
    ) right -120px top -120px / 660px 660px no-repeat,

    linear-gradient(
      45deg,
      transparent 0 48%,
      rgba(255, 255, 255, .035) 48.2% 48.45%,
      transparent 48.7%
    ) right -20px top -40px / 500px 500px no-repeat,

    radial-gradient(
      circle at 78% 18%,
      #282828 0,
      #171717 43%,
      #0f0f0f 100%
    );
}

.fold-service-article .article-hero > * {
  position: relative;
  z-index: 1;
}


/* Tereprendezés cikk – v3, végleges ütközésmentes felülírás */
.fold-service-article .article-copy {
  width: min(calc(100% - 40px), 1080px) !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}

.fold-service-article .article-copy .service-article-text {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  columns: 1 !important;
  column-count: 1 !important;
  column-width: auto !important;
  column-gap: 0 !important;
  column-rule: 0 !important;
}

.fold-service-article .service-article-text .fm-terep-article {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1080px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  break-inside: auto !important;
}

.fold-service-article .service-article-text .fm-terep-article,
.fold-service-article .service-article-text .fm-terep-article * {
  box-sizing: border-box;
}

.fold-service-article .service-article-text .fm-terep-article p {
  margin: 0 0 20px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-wrap: pretty;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  break-inside: auto !important;
}

.fold-service-article .service-article-text .fm-terep-article h2 {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 6px !important;
  color: #171717 !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  column-span: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.fold-service-article .service-article-text .fm-terep-article h2::after {
  display: none !important;
  content: none !important;
}

.fm-terep-intro {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 36px !important;
}

.fm-terep-intro p:last-child { margin-bottom: 0 !important; }

.fm-terep-top-images {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 0 58px !important;
}

.fm-split-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 285px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background-image: url('https://www.gepi-foldmunka-gyor.hu/images/Gehl-2.2-tonnas-mini-homlokrakodo-2.jpg');
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.fm-split-image--left { background-position: left center; }
.fm-split-image--right { background-position: right center; }
.fm-split-image > img { display: none !important; }

.fm-machine {
  display: grid !important;
  grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 30px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  break-inside: avoid !important;
}

.fm-machine + .fm-machine { margin-top: 62px !important; }
.fm-machine--image-right { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important; }

.fm-machine__content,
.fm-machine__header,
.fm-machine__header > div,
.fm-machine__description { min-width: 0 !important; }

.fm-machine__image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 285px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}

.fm-machine__image:not(.fm-split-image) > img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 6px !important;
}

.fm-machine--image-left .fm-machine__content {
  padding-left: 28px !important;
  border-left: 3px solid var(--accent, #f5b400) !important;
}

.fm-machine--image-right .fm-machine__content {
  padding-right: 28px !important;
  border-right: 3px solid var(--accent, #f5b400) !important;
}

.fm-machine__header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  margin: 0 0 20px !important;
}

.fm-machine__header > div { flex: 1 1 auto !important; }
.fm-machine__header p { margin: 0 !important; }

.fm-machine__icon {
  display: block !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background-color: var(--accent, #f5b400) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 38px 38px !important;
}

.fm-machine__icon--loader {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 37h31l8 8H13z'/%3E%3Cpath d='M20 37l5-14h15l7 14'/%3E%3Cpath d='M40 23h8l6 11'/%3E%3Ccircle cx='22' cy='48' r='6'/%3E%3Ccircle cx='45' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.fm-machine__icon--excavator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 49h34'/%3E%3Cpath d='M14 42h27l5 7H12z'/%3E%3Cpath d='M21 42V27h13l7 15'/%3E%3Cpath d='M34 27l7-11 7 3-5 14'/%3E%3Cpath d='M48 19l7 5-4 10'/%3E%3Cpath d='M51 34l6 4-8 5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.fm-machine__description {
  padding-top: 18px !important;
  border-top: 1px solid #d9d9d6 !important;
}
.fm-machine__description p:last-child { margin-bottom: 0 !important; }

.fm-tree-note {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 62px 0 0 !important;
  padding: 22px 28px !important;
  border: 1px solid var(--accent, #f5b400) !important;
  border-radius: 12px !important;
  background: #fffaf0 !important;
}

.fm-tree-note__icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  border: 2px solid var(--accent, #f5b400) !important;
  border-radius: 50% !important;
  background: center / 38px 38px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23111111'%3E%3Cpath d='M31 8c-8 0-14 6-14 14-6 1-10 6-10 12 0 7 6 13 13 13h8v9h8v-9h8c7 0 13-6 13-13 0-6-4-11-10-12C47 14 41 8 33 8z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.fm-tree-note p {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
}

@media (max-width: 850px) {
  .fm-terep-top-images { grid-template-columns: 1fr !important; margin-bottom: 44px !important; }
  .fm-split-image { height: auto !important; aspect-ratio: 1.55 / 1 !important; }
  .fm-machine,
  .fm-machine--image-right { grid-template-columns: 1fr !important; gap: 22px !important; }
  .fm-machine--image-right .fm-machine__image { order: -1 !important; }
  .fm-machine__image { height: auto !important; aspect-ratio: 1.55 / 1 !important; }
  .fm-machine--image-left .fm-machine__content,
  .fm-machine--image-right .fm-machine__content {
    padding: 0 0 0 20px !important;
    border: 0 !important;
    border-left: 3px solid var(--accent, #f5b400) !important;
  }
}

@media (max-width: 520px) {
  .fold-service-article .article-copy { width: min(calc(100% - 28px), 1080px) !important; }
  .fm-machine__header { gap: 13px !important; }
  .fm-machine__icon { flex-basis: 52px !important; width: 52px !important; height: 52px !important; background-size: 31px 31px !important; }
  .fold-service-article .service-article-text .fm-terep-article h2 { font-size: 25px !important; }
  .fm-tree-note { grid-template-columns: 54px minmax(0, 1fr) !important; gap: 15px !important; padding: 18px !important; }
  .fm-tree-note__icon { width: 52px !important; height: 52px !important; background-size: 30px 30px !important; }
  .fm-tree-note p { font-size: 18px !important; }
}

/* ==========================================================================
   TEREPRENDEZÉS – IKONOK ÉS ALSÓ INFORMÁCIÓS SÁV JAVÍTÁSA
   Ezt a blokkot a custom.css ÉS az editor.min.css LEGALJÁRA illeszd.
   ========================================================================== */

/*
 * A TinyMCE az üres <span> elemeket eltávolíthatja.
 * Ezért az ikonokat nem külön HTML-elemből, hanem CSS ::before elemből rajzoljuk.
 * Ha az eredeti span mégis megmaradt, elrejtjük, hogy ne legyen dupla ikon.
 */
.fm-machine__icon,
.fm-tree-note__icon {
  display: none !important;
}

/* Közös gépikon-megjelenés. */
.fm-machine__header::before {
  content: "";
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--accent, #f5b400);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 38px 38px;
}

/* Homlokrakodó ikon az első gépnél. */
.fm-machine--image-left .fm-machine__header::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 37h31l8 8H13z'/%3E%3Cpath d='M20 37l5-14h15l7 14'/%3E%3Cpath d='M40 23h8l6 11'/%3E%3Ccircle cx='22' cy='48' r='6'/%3E%3Ccircle cx='45' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Markoló ikon a második gépnél. */
.fm-machine--image-right .fm-machine__header::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 49h34'/%3E%3Cpath d='M14 42h27l5 7H12z'/%3E%3Cpath d='M21 42V27h13l7 15'/%3E%3Cpath d='M34 27l7-11 7 3-5 14'/%3E%3Cpath d='M48 19l7 5-4 10'/%3E%3Cpath d='M51 34l6 4-8 5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Fa ikon az alsó információs sávban. */
.fm-tree-note::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  border: 2px solid var(--accent, #f5b400);
  border-radius: 50%;
  background-color: #fffaf0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 38px 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23111111'%3E%3Cpath d='M31 8c-8 0-14 6-14 14-6 1-10 6-10 12 0 7 6 13 13 13h8v9h8v-9h8c7 0 13-6 13-13 0-6-4-11-10-12C47 14 41 8 33 8z'/%3E%3C/g%3E%3C/svg%3E");
}

/* A szöveg a második, széles oszlopba kerüljön, ne a 74 px-es ikonhelyre. */
.fm-tree-note > p {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 28px !important;
  border-left: 3px solid var(--accent, #f5b400) !important;
  color: #171717 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Az alsó sáv szövegének kiemelése a tervhez hasonlóan. */
.fm-tree-note > p strong {
  font-weight: 800 !important;
}

/* Mobilméretek. */
@media (max-width: 520px) {
  .fm-machine__header::before {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    background-size: 31px 31px;
  }

  .fm-tree-note::before {
    width: 52px;
    height: 52px;
    background-size: 30px 30px;
  }

  .fm-tree-note > p {
    padding-left: 16px !important;
    font-size: 18px !important;
  }
}