/* KönyvesPont – egyedi frontend CSS
   Csak olyan finomhangolás, amire nincs natív dsc-beállítás. */

/* 1) Termékkártya: térköz a terméknév alatt + mérsékelten nagyobb, reszponzív betűméret.
      A név linkje a .font-size-16 segédosztályt hordozza, ezért kell a !important. */
.v-item-card-parts-item-card-name-001 {
    margin-bottom: 0.85rem !important;
}
.v-item-card-parts-item-card-name-001 > a {
    font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem) !important;
    line-height: 1.35;
}
/* Sor-nézetű terméklistára ugyanez (ha a dsc item-display=row/switchable lesz). */
.v-item-row-parts-item-row-name-001 {
    margin-bottom: 0.85rem !important;
}
.v-item-row-parts-item-row-name-001 > a {
    font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem) !important;
    line-height: 1.35;
}

/* 2) Főoldali szekció-cím alatti térköz egységesítése.
      A featured/news szekció tartalom-burkolóján van `my-5` (3rem), a sections-típusún
      nincs semmi -> csak akkor adjuk meg, ha VAN látható szekció-cím (szomszédos elem),
      így a rejtett címû hero és záró CTA nem tolódik el. */
.v-section-title-001 + .v-start-sections-001 {
    margin-top: 3rem;
}

/* 3) Lábléc-logó: az arculati ÁLLÓ (inverz) lockup a motor `mh-60px` keretében
      olvashatatlanul kicsi lenne (a wordmark ~7px), ezért itt magasabbra engedjük.
      Csak a lábléc logójára hat, a fejléc vízszintes lockupja marad 60px. */
.v-footer-boxes-003 .v-common-logo-001 img {
    max-height: 100px;
}

/* 4) „Miben segíthetünk?" kártyák: a cím helye mindig két sornyi, így a kártyák
      szövege azonos magasságban kezdődik. CDP-vel mérve (400–1600px) a leghosszabb
      cím sehol nem tör 3 sorra. Csak md-től, ahol a kártyák egymás mellett állnak. */
@media (min-width: 768px) {
    #section_utak .card-title {
        min-height: 2.4em; /* 2 sor, heading line-height 1.2 */
    }
}

/* 5) „Így lesz a kéziratból könyv": a lépések sorszáma kör alakú jelvény.
      A kör fix mérete Bootstrap-osztállyal nem adható meg, minden más
      (szín, igazítás, betűsúly) natív osztályból jön. */
.kp-step-num {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}

/* 6) Két főoldali szekció álló háttérfotója.
      ⚠️ ÁTMENETI MEGOLDÁS. A dsc `{slug}_bg_image` mezője az `_upload/editor` GYÖKERÉHEZ
      relatív: a méretezett származékot a motor `_upload/editor/{w}x{h}/{fájl}` alá írja,
      és ha a fájlnévben alkönyvtár van (`sections/…`), azt a mappát már nem hozza létre
      -> a származék néma 404. A képek jelenleg az `_upload/editor/sections/` alatt vannak
      (oda tud tölteni a szekció-szerkesztő képfeltöltője), ezért a hátteret itt írjuk felül.
      A motor ugyanígy egyetlen 2560x1440 webp-et szolgálna ki álló háttérnél, tehát ez
      teljesítményben nem rosszabb.
      TEENDŐ: ha a két fájl bekerül az `_upload/editor` GYÖKERÉBE (admin Fájlkezelő), a dsc
      `folyamat_bg_image` / `zaro_bg_image` a puszta fájlnévre állítható, és EZ A BLOKK TÖRLENDŐ. */
#section_folyamat > .v-start-section-bgs-fixed {
    background-image: url('/_upload/editor/sections/kp-hatter-konyvtestek.webp') !important;
}
#section_zaro > .v-start-section-bgs-fixed {
    background-image: url('/_upload/editor/sections/kp-hatter-konyvek-polcon.webp') !important;
}


/* 7) Beviteli mezők kerete a márka kékkel (--pcolor).
      A téma alap keretszíne (--bs-border-color) halvány kék (#e3ecfb), ami fehér háttéren
      alig látszik. A Bootstrap a keretet `var(--bs-border-width) solid var(--bs-border-color)`
      alapján rajzolja, ezért elég a VÁLTOZÓT felülírni magukon a mezőkön: a kártyák,
      táblázatok, listaelemek kerete változatlan marad, és nem kell !important sem.
      A :focus keretszín a Bootstrap alap #86b7fe kékje helyett szintén a márkaszín.
      A :checked ág azért kell, mert a bejelölt checkbox/radio saját border-color-t kap. */
.form-control,
.form-select,
.form-check-input {
    --bs-border-color: var(--pcolor);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pcolor);
}
.form-check-input:checked {
    background-color: var(--pcolor);
    border-color: var(--pcolor);
}



/* 8) Termékkártya: a kép a képdoboz TETEJÉHEZ igazítva (ügyfélkérés, 2026-09-12).
      A képdoboz magassága kártyánként eltér (a Bootstrap `h-50` a kártya szövegének
      hosszától függően zsugorodik: mérve 131 és 155 px), ezért a függőlegesen középre
      igazított képek soronként más magasságban kezdődtek — a fix áras nyomdai termékeknél
      és szolgáltatásoknál ez szemmel is látszott. Felső igazítással minden kártyán
      ugyanott kezdődik a kép. A Bootstrap `align-items-center` segédosztály `!important`,
      ezért kell ide is. */
a.icon:has(.v-item-card-parts-item-card-img-001) {
    align-items: stretch !important;
}
/*    A kép a doboz méretére kicsinyedik, de NEM vágódik: `object-fit: contain` mellett a
      teljes borító látszik (szerző, cím, kiadói logó), `object-position: center top` miatt
      a doboz tetejéhez tapadva. Az `img` a `mw-100 mh-100` segédosztályokat hordozza, de
      azok százalékos korlátja a `picture` auto magassága miatt nem érvényesült. */
.v-item-card-parts-item-card-img-001 {
    display: block;
    width: 100%;
    height: 100%;
}
.v-item-card-parts-item-card-img-001 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}


/* 9) Főoldali hírlevél-szekció: elrendezés, tipográfia és térközök.
      A motor sablonján ezekre nincs natív dsc-beállítás; a `v-newsletter-*` marker-osztályok
      kizárólag ebben a szekcióban fordulnak elő, ezért a szabályok máshova nem szivárognak ki. */

/*    a) A sablon a doboz elé egy üres helykitöltő oszlopot rak (col-lg-3), ettől a doboz
      balra csúszott a sávban; helyette a sor tartalma kerül középre. */
.v-newsletter-001 {
    justify-content: center;
}
.v-newsletter-003 {
    display: none;
}

/*    b) A doboz a rács felét kapta, a benne lévő űrlap viszont a tartalmához zsugorodott,
      ezért a két beviteli mező feleslegesen keskeny volt. A sáv világoskék, a doboz fehér
      (a `newsletter_2_bg_color` dsc-kulcsból), az árnyék emeli el a kettőt egymástól. */
.v-newsletter-001 > div:has(#newsletterForm) {
    width: 100%;
    max-width: 52rem;
    box-shadow: 0 0.5rem 1.75rem rgba(var(--scolor-rgb), 0.1);
}
.v-newsletter-004 {
    width: 100%;
}

/*    c) A doboz címe a törzsbetűvel, normál vastagsággal megy: félkövéren elválik a leírástól. */
.v-newsletter-001 > div:has(#newsletterForm) > .font-size-24 {
    font-weight: 600;
}

/*    d) Az adatkezelési jelölőnégyzet és a felirata egy teljes szélességű, középre zárt
      címkében van, ezért kis kijelzőn a felirat második sora a négyzet alá csúszott.
      Függő behúzással (negatív text-indent) a folytatás a szöveg alá kerül, a tartalomhoz
      igazított szélesség pedig továbbra is középen tartja a sort. Flexbe tenni nem szabad:
      az a feliratot a link mentén külön elemekre bontaná. */
.v-newsletter-008 {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 1.55rem;
    text-indent: -1.55rem;
    text-align: start !important; /* a doboz `text-center` segédosztálya alól */
}
.v-newsletter-008 input {
    width: 1.05rem;
    height: 1.05rem;
    vertical-align: -0.15rem;
}

/*    e) A visszajelzés doboza akkor is helyet foglalt, amikor mindkét üzenete rejtett
      (`d-none`): az űrlap `gap-3`-ja miatt üres sáv maradt a gomb alatt. */
.v-newsletter-009:not(:has(.newsletter-msg:not(.d-none))) {
    display: none;
}

/*    f) Kis kijelzőn a doboz 3rem-es belső margója vette el a helyet a mezőktől. */
@media (max-width: 575.98px) {
    .v-newsletter-001 > div:has(#newsletterForm) {
        padding: 2rem 1.25rem !important;
    }
}