/* ================================================================
   MyPass LMS — Inner Page Styles
   Include alongside app.css for all non-homepage pages
   ================================================================ */

/* ----------------------------------------------------------------
   Breadcrumbs
   ---------------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--space-5); }
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}
.breadcrumbs__item { display: flex; align-items: center; gap: var(--space-1); }
.breadcrumbs__link {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.breadcrumbs__link:hover { color: var(--color-primary); }
.breadcrumbs__sep { font-size: var(--text-sm); color: var(--color-gray-200); }
.breadcrumbs__current { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }

/* ----------------------------------------------------------------
   Inner Page Hero
   ---------------------------------------------------------------- */
.inner-hero {
    padding: var(--space-16) 0 var(--space-12);
    background: linear-gradient(135deg, #F8F6FF 0%, #FFFFFF 70%);
    border-bottom: 1px solid var(--color-gray-100);
}
.inner-hero__inner { max-width: 860px; }
.inner-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
    margin-bottom: var(--space-5);
}
.inner-hero__subtext {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    margin-bottom: var(--space-8);
}

/* ----------------------------------------------------------------
   Inner Page Body
   ---------------------------------------------------------------- */
.inner-page { padding: var(--space-4) 0; }

/* ----------------------------------------------------------------
   Blog / Resource Cards
   ---------------------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
}
.blog-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-card__image-wrap { aspect-ratio: 16/9; overflow: hidden; }
.blog-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card__image { transform: scale(1.04); }
.blog-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.blog-card__category {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.blog-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    line-height: var(--leading-snug);
    flex: 1;
}
.blog-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}
.blog-card__date { font-size: var(--text-xs); color: var(--color-text-muted); }
.blog-card__read-more {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--transition-fast);
}
.blog-card:hover .blog-card__read-more { gap: var(--space-2); }

/* ----------------------------------------------------------------
   Contact Form
   ---------------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-16);
    padding: var(--space-16) 0;
    align-items: start;
}
.contact-info__heading {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}
.contact-info__body { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); }
.contact-detail { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact-detail__icon {
    width: 40px; height: 40px;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}
.contact-detail__label { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 2px; }
.contact-detail__value { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-gray-900); }

.form-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: var(--space-5); }
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-gray-800);
    margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(89,50,234,0.12);
}
.form-textarea { resize: vertical; min-height: 120px; line-height: var(--leading-relaxed); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

@media (max-width: 768px) {
    .contact-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
}