/* ==========================================================================
   Közös stílusok és MOBIL NÉZET (Egyetlen vízszintes sorban)
   ========================================================================== */

.pater {
    font-size: 0.65em;
    position: fixed;
    bottom: 0px !important;     /* Mobilom teljesen rásimul az aljára */
    left: 0px !important;       /* Kitölti a képernyő alját */
    right: 0px !important;
    width: 100% !important;     
    padding: 20px 10px 10px 10px !important;
    display: block !important;
  /*  background: var(--background-color-3) !important;  */ 
    z-index: 9999 !important;   /* Minden felett lebeg */
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.pater,
.pater:hover {
    color: #ffffff;
    transform: none !important;
}

/* Felirat a dobozok felett */
.pater::after {
    content: 'Támogatóink:' !important;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    font-size: 0.75em;
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0.8;
    color: #ffffff;
}

/* Kiszedjük a gyári felesleges elemeket */
.pater__deco, 
.pater__title, 
.pater__desc, 
.pater__img {
    display: none !important;
}

/* MOBIL: Egymás melletti rugalmas sor */
.pater__grid-fixed {
    display: flex !important;
    flex-direction: row !important;      /* Vízszintes elrendezés */
    flex-wrap: nowrap !important;        /* Tilos több sorba törni */
    justify-content: center !important;  /* Középre igazítás mobilon */
    gap: 6px !important;                 /* Rések a dobozok között */
    margin: 5px auto 0 !important;
    width: 100% !important;
}

/* A 45x45 px-es, fehér hátterű rekeszek */
.pater__grid-fixed .logo-box {
    width: 55px !important;
    height: 55px !important;
    flex: 0 0 55px !important;          /* Fixen tartja a 45px szélességet, nem engedi összenyomni */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

/* Logók méretezése a dobozon belül */
.pater__grid-fixed .logo-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 3px !important;
}

/* ==========================================================================
   ASZTALI NÉZET (Visszaáll a kompakt 2 oszlopos formátum a sarokba)
   ========================================================================== */
@media screen and (min-width: 50em) {
    .pater {
        top: 10px !important;           /* Jobb felső sarokba ugrik */
        bottom: auto !important;
        left: auto !important;
        right: 10px !important;
        width: max-content !important;  /* Csak akkora lesz, mint a rács */
        background: transparent !important; /* Eltűnik a teljes sávos háttér */
        padding: 15px 10px 10px 10px !important;
        box-shadow: none !important;
    }
    
    .pater::after {
        top: 0px;
    }

    /* Asztalon visszaalakítjuk a 2 oszlopos, 3 soros kompakt ráccsá */
    .pater__grid-fixed {
        display: grid !important;
        grid-template-columns: repeat(2, 55px) !important;
        grid-template-rows: repeat(3, 55px) !important;
        width: max-content !important;
    }
}