/**
 * GoodSalla — Homepage Page CSS
 * Styles for front-page.php sections.
 * Reusable component styles stay in components.css.
 *
 * @package GoodSalla
 */

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════ */
.gs-hero {
    background: var(--gs-color-white);
    overflow: hidden;
}

.gs-section--no-padding {
    padding: 0;
}

.gs-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    max-width: var(--gs-container-max);
    margin-inline: auto;
    padding-inline: var(--gs-container-padding);
}

.gs-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gs-space-5);
    padding: var(--gs-space-16) 0;
    padding-right: var(--gs-space-12);
    max-width: 540px;
}

.gs-hero__eyebrow {
    display: inline-block;
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-color-primary);
}

.gs-hero__heading {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-3xl), 4vw, var(--gs-text-5xl));
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-heading);
    line-height: var(--gs-leading-tight);
    letter-spacing: -0.02em;
    margin: 0;
}

.gs-hero__body {
    font-size: var(--gs-text-md);
    color: var(--gs-color-text-muted);
    line-height: var(--gs-leading-relaxed);
    max-width: 44ch;
    margin: 0;
}

.gs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-4);
    align-items: center;
}

.gs-hero__image-wrap {
    position: relative;
    overflow: hidden;
}

.gs-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gs-hero__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0ede8 0%, #e8e3dc 40%, #d4ccbf 100%);
    min-height: 400px;
}

/* ═══════════════════════════════════════════════════════════
   TRUST STRIP (Homepage)
═══════════════════════════════════════════════════════════ */
.gs-section--trust-strip {
    padding: var(--gs-space-5) 0;
    background: var(--gs-color-off-white);
    border-top: 1px solid var(--gs-color-border);
    border-bottom: 1px solid var(--gs-color-border);
}

/* ═══════════════════════════════════════════════════════════
   CONCERN CARDS
═══════════════════════════════════════════════════════════ */
.gs-concern-grid {
    display: grid;
    gap: var(--gs-space-5);
    justify-items: center;
}

.gs-concern-grid--6 { grid-template-columns: repeat(6, 1fr); }
.gs-concern-grid--5 { grid-template-columns: repeat(5, 1fr); }

.gs-concern-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gs-space-3);
    text-decoration: none;
    color: var(--gs-color-text);
    transition: transform var(--gs-transition-base);
}

.gs-concern-card:hover {
    transform: translateY(-4px);
}

.gs-concern-card:hover .gs-concern-card__circle {
    box-shadow: var(--gs-shadow-md);
}

.gs-concern-card__circle {
    width: 96px;
    height: 96px;
    border-radius: var(--gs-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow var(--gs-transition-base);
    box-shadow: var(--gs-shadow-sm);
}

.gs-concern-card__emoji {
    font-size: 2rem;
    line-height: 1;
}

.gs-concern-card__label {
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-medium);
    color: var(--gs-color-text);
    text-align: center;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADER (heading + view-all in one row)
═══════════════════════════════════════════════════════════ */
.gs-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--gs-space-8);
}

.gs-section-header .gs-section-heading__title {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY BANNER (Skincare split)
═══════════════════════════════════════════════════════════ */
.gs-category-banner {
    overflow: hidden;
}

.gs-category-banner__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

.gs-category-banner__content {
    background: var(--gs-color-heading);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gs-space-5);
    padding: var(--gs-space-16) var(--gs-space-12);
    max-width: 640px;
    margin-inline: auto;
}

.gs-category-banner__eyebrow {
    display: inline-block;
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-color-accent);
}

.gs-category-banner__heading {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 3vw, var(--gs-text-4xl));
    color: var(--gs-color-white);
    margin: 0;
    line-height: var(--gs-leading-tight);
}

.gs-category-banner__body {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gs-text-md);
    max-width: 40ch;
    margin: 0;
    line-height: var(--gs-leading-relaxed);
}

.gs-category-banner__image {
    position: relative;
    overflow: hidden;
}

.gs-category-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-category-banner__image-placeholder--skincare {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(135deg, #c8d8c0 0%, #9bb89f 50%, #6a9470 100%);
}

/* ═══════════════════════════════════════════════════════════
   NEW ARRIVALS STAR
═══════════════════════════════════════════════════════════ */
.gs-new-arrivals__star {
    color: var(--gs-color-accent);
    margin-right: var(--gs-space-2);
}

/* ═══════════════════════════════════════════════════════════
   QUIZ CTA BANNER
═══════════════════════════════════════════════════════════ */
.gs-quiz-banner {
    background: var(--gs-color-primary);
    color: var(--gs-color-white);
}

.gs-quiz-banner__inner {
    text-align: center;
}

.gs-quiz-banner__heading {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 3vw, var(--gs-text-4xl));
    color: var(--gs-color-white);
    margin-bottom: var(--gs-space-4);
}

.gs-quiz-banner__body {
    font-size: var(--gs-text-md);
    color: rgba(255, 255, 255, 0.85);
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--gs-space-8);
}

.gs-quiz-banner__cta {
    color: var(--gs-color-white);
    border-color: var(--gs-color-white);
    gap: var(--gs-space-2);
}

.gs-quiz-banner__cta:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gs-color-white);
    color: var(--gs-color-white);
}

/* ═══════════════════════════════════════════════════════════
   HAIRCARE CATEGORY CARDS
═══════════════════════════════════════════════════════════ */
.gs-haircare-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gs-space-5);
}

.gs-haircare-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--gs-color-white);
    border-radius: var(--gs-radius-lg);
    border: 1px solid var(--gs-color-border);
    overflow: hidden;
    text-decoration: none;
    color: var(--gs-color-text);
    transition: box-shadow var(--gs-transition-base), transform var(--gs-transition-base);
}

.gs-haircare-cat-card:hover {
    box-shadow: var(--gs-shadow-md);
    transform: translateY(-2px);
}

.gs-haircare-cat-card__image-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gs-color-surface);
}

.gs-haircare-cat-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gs-transition-slow);
}

.gs-haircare-cat-card:hover .gs-haircare-cat-card__image-wrap img {
    transform: scale(1.04);
}

.gs-haircare-cat-card__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-color-surface);
    font-size: 3rem;
}

.gs-haircare-cat-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gs-space-4) var(--gs-space-5);
    gap: var(--gs-space-3);
}

.gs-haircare-cat-card__name {
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text);
}

.gs-haircare-cat-card__arrow {
    color: var(--gs-color-primary);
    flex-shrink: 0;
    transition: transform var(--gs-transition-fast);
}

.gs-haircare-cat-card:hover .gs-haircare-cat-card__arrow {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════
   BLOG CARDS
═══════════════════════════════════════════════════════════ */
.gs-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gs-space-6);
}

.gs-blog-card {
    background: var(--gs-color-white);
    border-radius: var(--gs-radius-lg);
    border: 1px solid var(--gs-color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--gs-transition-base);
}

.gs-blog-card:hover {
    box-shadow: var(--gs-shadow-md);
}

.gs-blog-card__image-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--gs-color-surface);
}

.gs-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gs-transition-slow);
}

.gs-blog-card:hover .gs-blog-card__image {
    transform: scale(1.04);
}

.gs-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-3);
    padding: var(--gs-space-5);
    flex: 1;
}

.gs-blog-card__tag {
    display: inline-block;
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-color-primary);
}

.gs-blog-card__title {
    font-family: var(--gs-font-heading);
    font-size: var(--gs-text-xl);
    color: var(--gs-color-heading);
    margin: 0;
    line-height: var(--gs-leading-snug);
}

.gs-blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.gs-blog-card__title a:hover {
    color: var(--gs-color-primary);
}

.gs-blog-card__meta {
    color: var(--gs-color-text-muted);
    font-size: var(--gs-text-sm);
}

.gs-blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-space-1);
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-primary);
    margin-top: auto;
}

.gs-blog-card__link:hover {
    color: var(--gs-color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER SECTION (Homepage centered variant)
═══════════════════════════════════════════════════════════ */
.gs-newsletter-section__inner {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
}

.gs-newsletter-section__heading {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 3vw, var(--gs-text-3xl));
    color: var(--gs-color-heading);
    margin-bottom: var(--gs-space-3);
}

.gs-newsletter-section__subtitle {
    color: var(--gs-color-text-muted);
    font-size: var(--gs-text-md);
    margin-bottom: var(--gs-space-6);
    max-width: 44ch;
    margin-inline: auto;
}

.gs-newsletter-form--centered .gs-newsletter-form__field-group {
    max-width: 480px;
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PAGE & BLOG POST
═══════════════════════════════════════════════════════════ */
.gs-page-template,
.gs-single-post {
    padding-top: var(--gs-space-8);
    padding-bottom: var(--gs-space-16);
}

.gs-page-header,
.gs-article-header {
    margin-bottom: var(--gs-space-8);
    max-width: 800px;
}

.gs-page-title,
.gs-article-header__title {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-3xl), 5vw, var(--gs-text-5xl));
    color: var(--gs-color-heading);
    margin-top: 0;
    margin-bottom: var(--gs-space-3);
    line-height: 1.1;
}

.gs-article-header__tag {
    display: inline-block;
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gs-color-primary);
    margin-bottom: var(--gs-space-3);
}

.gs-article-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gs-space-2);
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
}

.gs-article__featured-image-wrap {
    margin-bottom: var(--gs-space-10);
    border-radius: var(--gs-radius-lg);
    overflow: hidden;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}

.gs-article__featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-page-content,
.gs-article__content {
    font-size: var(--gs-text-base);
    line-height: var(--gs-leading-relaxed);
    color: var(--gs-color-text);
    max-width: 800px;
}

.gs-page-content p,
.gs-article__content p {
    margin-bottom: var(--gs-space-5);
}

.gs-article__footer {
    margin-top: var(--gs-space-10);
    padding-top: var(--gs-space-6);
    border-top: 1px solid var(--gs-color-border);
    max-width: 800px;
}

.gs-article__tags a {
    display: inline-block;
    padding: var(--gs-space-1) var(--gs-space-3);
    background: var(--gs-color-surface);
    color: var(--gs-color-text);
    border-radius: var(--gs-radius-sm);
    font-size: var(--gs-text-xs);
    margin-left: var(--gs-space-1);
    transition: background var(--gs-transition-fast), color var(--gs-transition-fast);
}

.gs-article__tags a:hover {
    background: var(--gs-color-primary);
    color: var(--gs-color-white);
}

/* Post navigation prev/next */
.gs-post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--gs-space-6);
    margin-top: var(--gs-space-12);
    padding-top: var(--gs-space-8);
    border-top: 1px solid var(--gs-color-border);
    max-width: 800px;
}

.gs-post-navigation a {
    font-weight: var(--gs-font-semibold);
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text);
}

.gs-post-navigation a:hover {
    color: var(--gs-color-primary);
}

/* ─── Routine results details ─── */
.gs-routine-header {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--gs-space-10);
}

.gs-routine-header__eyebrow {
    display: inline-block;
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gs-color-primary);
    margin-bottom: var(--gs-space-2);
}

.gs-routine-header__title {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 4vw, var(--gs-text-4xl));
    color: var(--gs-color-heading);
    margin-bottom: var(--gs-space-4);
}

.gs-routine-header__disclaimer {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
    line-height: var(--gs-leading-snug);
    border-left: 3px solid var(--gs-color-border-strong);
    padding-left: var(--gs-space-4);
    text-align: left;
    max-width: 600px;
    margin-inline: auto;
}

.gs-routine-profile {
    background: var(--gs-color-surface);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-6) var(--gs-space-8);
    margin-bottom: var(--gs-space-10);
    max-width: 800px;
    margin-inline: auto;
}

.gs-routine-profile__title {
    font-size: var(--gs-text-lg);
    font-weight: var(--gs-font-semibold);
    margin-bottom: var(--gs-space-4);
    margin-top: 0;
}

.gs-routine-profile__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gs-space-6);
}

.gs-routine-profile__item {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
}

.gs-routine-profile__label {
    font-size: var(--gs-text-xs);
    color: var(--gs-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gs-routine-profile__value {
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text);
}

.gs-routine-products {
    margin-bottom: var(--gs-space-12);
}

.gs-routine-products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gs-space-8);
    flex-wrap: wrap;
    gap: var(--gs-space-4);
}

.gs-routine-products__title {
    font-family: var(--gs-font-heading);
    font-size: var(--gs-text-2xl);
    margin: 0;
}

.gs-routine-footer {
    text-align: center;
}

.gs-routine-error {
    text-align: center;
    padding: var(--gs-space-16) 0;
    max-width: 480px;
    margin-inline: auto;
}

.gs-routine-error__title {
    font-family: var(--gs-font-heading);
    font-size: var(--gs-text-3xl);
    margin-bottom: var(--gs-space-4);
}

.gs-routine-error__message {
    color: var(--gs-color-text-muted);
    margin-bottom: var(--gs-space-8);
}

.gs-routine-error__actions {
    display: flex;
    justify-content: center;
    gap: var(--gs-space-4);
}

@media (max-width: 767px) {
    .gs-routine-profile__grid {
        grid-template-columns: 1fr;
        gap: var(--gs-space-4);
    }
}