/* =============================================
   قلاب الطائف - تنسيقات مستقلة لصفحة alab.php
   ============================================= */

:root {
    --alab-primary: #e07b1a;
    --alab-primary-dark: #b8600f;
    --alab-secondary: #2c3e50;
    --alab-light-bg: #fff8f0;
}

/* ===== Hero ===== */
.alab-page-header {
    background-image: url('../images/alab/1.webp');
    background-size: cover;
    background-position: center;
}

.alab-page-header .page-header-overlay {
    background: linear-gradient(rgba(44, 30, 10, 0.72), rgba(20, 15, 8, 0.78));
}

.alab-page-header .page-header-content .alab-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--alab-primary);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    margin-top: 18px;
    box-shadow: 0 6px 18px rgba(224, 123, 26, 0.45);
    text-decoration: none;
}

.alab-page-header .page-header-content .alab-phone-badge i {
    font-size: 1.1em;
}

/* ===== Gallery ===== */
.alab-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.alab-gallery-grid .portfolio-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alab-gallery-grid .portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 26px rgba(224, 123, 26, 0.25);
}

.alab-gallery-grid .portfolio-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* ===== Intro band ===== */
.alab-intro {
    background: var(--alab-light-bg);
    padding: 3.5rem 0;
}

.alab-intro .alab-intro-inner {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.alab-intro h1,
.alab-intro h2 {
    color: var(--alab-secondary);
    margin-bottom: 1rem;
}

.alab-intro p {
    color: #4a4a4a;
    line-height: 2;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.alab-intro .alab-call-line {
    font-weight: 700;
    color: var(--alab-primary-dark);
    font-size: 1.2rem;
    margin-top: 1.2rem;
}

/* ===== Services grid (تخصيص فوق service-detail-card العام) ===== */
.alab-services .service-icon {
    background: linear-gradient(135deg, var(--alab-primary), var(--alab-primary-dark));
}

.alab-services .service-detail-card {
    border-top: 3px solid var(--alab-primary);
}

/* إصلاح: منع تمدد الفقرات وتساوي ارتفاع البطاقات القسري الذي يسبب
   فراغات بيضاء كبيرة عندما يختلف طول المحتوى بين البطاقات في نفس الصف.
   هذا الملف يُحمَّل فقط في alab.php لذا التعميم هنا آمن. */
.services-grid {
    align-items: start;
}

.service-detail-card {
    height: auto;
}

.service-detail-card p {
    flex-grow: 0;
}

/* شبكة بعمود واحد لبطاقتين متفاوتتي الطول، لتفادي مشكلة تساوي ارتفاع
   صف الـ grid القسري (حيث يتحدد ارتفاع الصف بأطول عنصر فيه دائمًا حتى
   مع align-items: start، مما يترك فراغًا خلف البطاقة الأقصر) */
.alab-grid-stack {
    grid-template-columns: 1fr !important;
    max-width: 820px;
    margin: 0 auto;
}

/* ===== Material chips ===== */
.alab-materials {
    padding: 3.5rem 0;
    background: #fff;
}

.alab-materials-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 1.5rem;
}

.alab-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--alab-light-bg);
    border: 1px solid #f0d9b8;
    color: var(--alab-secondary);
    padding: 10px 18px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.alab-chip i {
    color: var(--alab-primary);
}

.alab-chip:hover {
    background: var(--alab-primary);
    color: #fff;
    border-color: var(--alab-primary);
}

.alab-chip:hover i {
    color: #fff;
}

/* ===== Rental options ===== */
.alab-rental-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.alab-rental-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid var(--alab-primary);
}

.alab-rental-card i {
    font-size: 2.2rem;
    color: var(--alab-primary);
    margin-bottom: 1rem;
}

.alab-rental-card h3 {
    color: var(--alab-secondary);
    margin-bottom: 0.6rem;
}

.alab-rental-card p {
    color: #666;
    line-height: 1.8;
}

/* ===== Steps: كيف تطلب قلاب ===== */
.alab-steps-section {
    background: var(--alab-secondary);
    padding: 4rem 0;
    color: #fff;
}

.alab-steps-section .section-title,
.alab-steps-section .section-subtitle {
    color: #fff;
}

.alab-steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    counter-reset: alab-step;
}

.alab-step-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 1.6rem;
    position: relative;
}

.alab-step-item::before {
    counter-increment: alab-step;
    content: counter(alab-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--alab-primary);
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.alab-step-item h4 {
    color: #fff;
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}

.alab-step-item p {
    color: #d8d8d8;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ===== Service areas ===== */
.alab-areas {
    padding: 3.5rem 0;
    text-align: center;
}

.alab-areas p {
    max-width: 850px;
    margin: 0 auto 1rem;
    line-height: 2;
    color: #4a4a4a;
}

/* ===== CTA band ===== */
.alab-cta-band {
    background: linear-gradient(135deg, var(--alab-primary), var(--alab-primary-dark));
    padding: 3rem 0;
    text-align: center;
    color: #fff;
}

.alab-cta-band h2 {
    color: #fff;
    margin-bottom: 0.8rem;
}

.alab-cta-band p {
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.alab-cta-band .alab-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.alab-cta-band .alab-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--alab-primary-dark);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.alab-cta-band .alab-cta-btn.alab-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.alab-cta-band .alab-cta-btn:hover {
    transform: translateY(-3px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .alab-gallery-grid .portfolio-image img { height: 180px; }
    .alab-intro p { font-size: 1rem; }
    .alab-steps-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .alab-steps-list { grid-template-columns: 1fr; }
    .alab-materials-chips { gap: 8px; }
    .alab-chip { padding: 8px 14px; font-size: 0.85rem; }
}