/* ==========================================================
   Icon Item Block — ACF Block
   Elementor-style single icon widget
   ========================================================== */

/* ---------- CSS Variables (defaults, overridden inline) --- */
.icon-item {
    --icon-size: 64px;
    --icon-gap: 15px;
    --icon-padding: 0px;
    --icon-border-radius: 0px;
    --icon-bg: transparent;
    --icon-border: none;
    --title-color: inherit;
    --desc-color: inherit;

    display: flex;
    flex-wrap: wrap;
}

/* ===================== POSITIONS ========================= */

/* TOP (default) — icon above text, stack vertically */
.icon-item.icon-position-top {
    flex-direction: column;
}

/* LEFT — icon left, text right */
.icon-item.icon-position-left {
    flex-direction: row;
    align-items: flex-start;
}

/* RIGHT — icon right, text left */
.icon-item.icon-position-right {
    flex-direction: row-reverse;
    align-items: flex-start;
}

/* ===================== ALIGNMENT ========================= */

.icon-item.icon-align-left  { align-items: flex-start; text-align: left; }
.icon-item.icon-align-center { align-items: center;    text-align: center; }
.icon-item.icon-align-right  { align-items: flex-end;  text-align: right; }

/* Center alignment για top position */
.icon-item.icon-position-top.icon-align-center {
    align-items: center;
}
.icon-item.icon-position-top.icon-align-right {
    align-items: flex-end;
}

/* ===================== ICON WRAPPER ====================== */

.icon-item__icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: var(--icon-padding);
    background-color: var(--icon-bg);
    border: var(--icon-border);
    border-radius: var(--icon-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Gap ανάλογα με position */
.icon-item.icon-position-top    .icon-item__icon-wrap { margin-bottom: var(--icon-gap); }
.icon-item.icon-position-left   .icon-item__icon-wrap { margin-right: var(--icon-gap); }
.icon-item.icon-position-right  .icon-item__icon-wrap { margin-left: var(--icon-gap); }

/* ===================== ICON IMAGE ======================== */

.icon-item__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- Hover image swap --- */
.icon-item__icon--hover {
    position: absolute;
    top: var(--icon-padding);
    left: var(--icon-padding);
    width: calc(100% - calc(var(--icon-padding) * 2));
    height: calc(100% - calc(var(--icon-padding) * 2));
    opacity: 0;
}

.icon-item:hover .icon-item__icon--default { opacity: 0; }
.icon-item:hover .icon-item__icon--hover   { opacity: 1; }

/* ===================== HOVER EFFECTS ===================== */

/* Rotate */
.icon-item.hover-rotate:hover .icon-item__icon-wrap {
    transform: rotate(15deg);
}

/* Zoom */
.icon-item.hover-zoom:hover .icon-item__icon-wrap {
    transform: scale(1.15);
}

/* Float */
@keyframes icon-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.icon-item.hover-float:hover .icon-item__icon-wrap {
    animation: icon-float 0.8s ease-in-out infinite;
}

/* Pulse */
@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}
.icon-item.hover-pulse:hover .icon-item__icon-wrap {
    animation: icon-pulse 0.6s ease-in-out infinite;
}

/* Shake */
@keyframes icon-shake {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-8deg); }
    40%       { transform: rotate(8deg); }
    60%       { transform: rotate(-5deg); }
    80%       { transform: rotate(5deg); }
}
.icon-item.hover-shake:hover .icon-item__icon-wrap {
    animation: icon-shake 0.5s ease;
}

/* ===================== CONTENT ========================== */

.icon-item__content {
    flex: 1;
}

.icon-item__title {
    margin: 0 0 8px;
    color: var(--title-color);
    font-size:32px;
    font-style: normal;
    font-weight: 500;
}

.icon-item__description {
    color: var(--desc-color);
}

.icon-item__description p:first-child { margin-top: 0; }
.icon-item__description p:last-child  { margin-bottom: 0; }

/* ===================== LINK WRAPPING ==================== */

.icon-item__link {
    display: contents; /* Κληρονομεί flex layout του parent */
    text-decoration: none;
    color: inherit;
}

/* ===================== RESPONSIVE ======================= */
@media screen and (max-width: 1000px) {
    .icon-item__title {font-size: 24px;}
}

@media screen and (max-width: 768px) {
    .icon-item.icon-position-left,
    .icon-item.icon-position-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .icon-item.icon-position-right .icon-item__icon-wrap {
        margin-left: 0;
        margin-bottom: var(--icon-gap);
    }

    .icon-item.icon-position-left .icon-item__icon-wrap {
        margin-right: 0;
        margin-bottom: var(--icon-gap);
    }

    .icon-item__title {font-size: 20px;}
}

@media screen and (max-width: 500px) {
    .icon-item__title {font-size: 18px;}
    .icon-grid {gap: 10px;}
}