/**
 * Placeholder Image Styles
 * Displays styled placeholders when actual images are not available
 */

/* ========================================
   IMAGE PLACEHOLDER SYSTEM
   ======================================== */

/* Base placeholder styling */
.placeholder-image {
    background: linear-gradient(135deg, var(--light-pink) 0%, var(--primary-pink) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.placeholder-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect fill='%23ffffff' fill-opacity='0.1' width='100' height='100'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0 0h50v50H0zM50 50h50v50H50z'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.placeholder-image i {
    font-size: 3rem;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.placeholder-image span {
    position: relative;
    z-index: 1;
}

/* Hero placeholder */
.hero-placeholder {
    min-height: 400px;
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 50%, #880E4F 100%);
}

.hero-placeholder::after {
    content: 'IKON HR';
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255,255,255,0.1);
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* Logo placeholder */
.logo-placeholder {
    width: 200px;
    height: 60px;
    background: var(--primary-pink);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* Service card placeholder */
.service-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--light-pink) 0%, #FCE4EC 100%);
    border-radius: var(--radius-lg);
}

/* Partner logo placeholder */
.partner-placeholder {
    width: 150px;
    height: 80px;
    background: var(--white);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Avatar placeholder */
.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-pink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Blog image placeholder */
.blog-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image-placeholder i {
    font-size: 4rem;
    color: rgba(255,255,255,0.5);
}

/* Event image placeholder */
.event-image-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #673AB7 0%, #9C27B0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-image-placeholder i {
    font-size: 3rem;
    color: rgba(255,255,255,0.6);
}

/* ========================================
   IMAGE ERROR HANDLING
   ======================================== */

/* Hide broken images and show placeholder */
img.error,
img[src=""],
img:not([src]) {
    visibility: hidden;
    position: relative;
}

img.error::after,
img[src=""]::after,
img:not([src])::after {
    content: '';
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-pink);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   SKELETON LOADING
   ======================================== */

.skeleton-image {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton variations */
.skeleton-hero {
    height: 400px;
    border-radius: var(--radius-lg);
}

.skeleton-card {
    height: 250px;
    border-radius: var(--radius-lg);
}

.skeleton-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: var(--radius-sm);
}

.skeleton-title {
    height: 2em;
    width: 60%;
    margin-bottom: 1em;
    border-radius: var(--radius-sm);
}