/* Guides hub and guide articles. Values mirror the website's GuidePage.tsx
   and GuidesHubPage.tsx so the two render the same. */

/* .style-eyebrow lives in stylizations.css, which these pages do not load. */
.guide-hero .style-eyebrow {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.42857;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #7a4ca5;
}
@media (min-width: 768px) {
    .guide-hero .style-eyebrow { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
}

.guide-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7a4ca5;
    text-decoration: none;
    transition: color 200ms;
}
.guide-back-link:hover { color: #5e3a80; }
.guide-back-link svg { height: 16px; width: 16px; transition: transform 300ms; }
.guide-back-link:hover svg { transform: translateX(-2px); }

/* Bands: px-6 py-12 / md:px-12 md:py-[70px] / lg:px-24, container max-w-6xl */

/* body is --surface-page-secondary (#F2F2F2); the article sits on white and
   alternates to #f9f9f9, as on the website. */
.guide-hero, .guide-band, .guide-toc, .guides-list { background-color: #ffffff; }

.guide-band, .guide-toc, .guides-list { padding: 48px 24px; }
@media (min-width: 768px) {
    .guide-band, .guide-toc, .guides-list { padding: 70px 48px; }
}
@media (min-width: 1024px) {
    .guide-band, .guide-toc, .guides-list { padding-left: 96px; padding-right: 96px; }
}

.guide-band { scroll-margin-top: 80px; }
.guide-band-shaded { background-color: #f9f9f9; }

.guide-band-inner, .guides-list-inner {
    position: relative;
    margin: 0 auto;
    max-width: 1152px;
}

.guide-band-heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.33333;
    color: #0c0c0c;
}
.guide-section-head .guide-band-heading { line-height: 1.25; }
@media (min-width: 768px) {
    .guide-band-heading { font-size: 30px; line-height: 1.2; }
    .guide-section-head .guide-band-heading { line-height: 1.25; padding-top: 4px; }
}

/* Hero */

.guide-hero {
    position: relative;
    overflow: hidden;
    padding: 112px 24px 40px;
}
@media (min-width: 768px) {
    .guide-hero { padding: 128px 48px 56px; }
}
@media (min-width: 1024px) {
    .guide-hero { padding-left: 96px; padding-right: 96px; }
}

.guide-hero-glow {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0;
    height: 380px;
    width: 700px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: radial-gradient(closest-side, rgba(122, 76, 165, 0.2), rgba(243, 237, 249, 0.1) 45%, transparent 100%);
    filter: blur(64px);
}

.guide-h1 {
    margin-bottom: 20px;
    max-width: 896px;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    color: #0c0c0c;
}
/* Caps at 48px to match what the live site renders. The website's markup also
   carries lg:text-6xl (60px), but it does not take effect there. */
@media (min-width: 768px) {
    .guide-h1 { font-size: 48px; }
}

.guide-h1-accent {
    display: block;
    color: #7a4ca5;
}

.guide-lead {
    max-width: 768px;
    font-size: 18px;
    line-height: 1.625;
    color: #545454;
}
@media (min-width: 768px) {
    .guide-lead { font-size: 20px; }
}

.guide-intro {
    margin-top: 20px;
    max-width: 768px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Article text: max-w-3xl, text-base/1.75, md:text-lg/1.8 */

.guide-paragraph {
    max-width: 768px;
    font-size: 16px;
    line-height: 1.75;
    color: #545454;
}
@media (min-width: 768px) {
    .guide-paragraph { font-size: 18px; line-height: 1.8; }
}

.guide-blocks {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 768px) {
    .guide-blocks { gap: 24px; }
}

.guide-section-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .guide-section-head { gap: 20px; margin-bottom: 32px; }
}

.guide-step-badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    border-radius: 16px;
    background: linear-gradient(to bottom right, #7a4ca5, #8b65ae);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.025em;
    box-shadow: 0 8px 18px rgba(122, 76, 165, 0.24);
}

/* Contents, laid out as cards like the tips on a style page */

.guide-toc { padding-top: 0; }
.guide-toc .guide-band-heading { margin-bottom: 24px; }
@media (min-width: 768px) {
    .guide-toc .guide-band-heading { margin-bottom: 32px; }
}

.guide-toc-grid {
    list-style: none;
    display: grid;
    gap: 12px;
    padding: 0;
}
@media (min-width: 640px) {
    .guide-toc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .guide-toc-grid { gap: 16px; }
}

.guide-toc-card {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 16px;
    border-radius: 20px;
    border: 1px solid #e6dff0;
    background-color: #ffffff;
    padding: 16px 20px;
    text-decoration: none;
    box-shadow: var(--elevate-1);
    transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.guide-toc-card:hover {
    transform: translateY(-2px);
    border-color: #cdb8df;
    box-shadow: var(--elevate-2, var(--elevate-1));
}

.guide-toc-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    border-radius: 12px;
    background-color: #f3edf9;
    font-size: 14px;
    font-weight: 500;
    color: #7a4ca5;
}

.guide-toc-text {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.375;
    color: #0c0c0c;
}
@media (min-width: 768px) {
    .guide-toc-text { font-size: 18px; }
}

.guide-toc-card svg {
    height: 16px;
    width: 16px;
    flex-shrink: 0;
    color: #b5a5c7;
    transition: transform 300ms, color 300ms;
}
.guide-toc-card:hover svg { transform: translateX(4px); color: #7a4ca5; }

/* mb-8 above the FAQ card */
.guide-faq-heading { margin-bottom: 32px; }

/* Tip callout */

.guide-tip {
    max-width: 768px;
    border-radius: 24px;
    border: 1px solid #e6dff0;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: var(--elevate-1);
}
@media (min-width: 768px) {
    .guide-tip { padding: 24px; }
}

.guide-tip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #7a4ca5;
}
@media (min-width: 768px) {
    .guide-tip-label { font-size: 16px; }
}
.guide-tip-label svg { height: 16px; width: 16px; }

.guide-tip-text { max-width: none; }

/* Closing links */

.guide-more {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
@media (min-width: 768px) {
    .guide-more { gap: 64px; }
}

.guide-more-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .guide-more-head { margin-bottom: 32px; }
}

/* mb-6 / md:mb-8 above both closing grids */
.guide-more > div > .guide-band-heading { margin-bottom: 24px; }
@media (min-width: 768px) {
    .guide-more > div > .guide-band-heading { margin-bottom: 32px; }
}

.guide-category-grid {
    list-style: none;
    display: grid;
    gap: 16px;
    padding: 0;
}
@media (min-width: 640px) {
    .guide-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .guide-category-grid { gap: 24px; }
}
@media (min-width: 1024px) {
    .guide-category-grid { grid-template-columns: repeat(3, 1fr); }
}

.guide-category-card {
    display: flex;
    height: 100%;
    min-height: 208px;
    flex-direction: column;
    border-radius: 28px;
    border: 1px solid #e6dff0;
    background-color: #ffffff;
    padding: 24px;
    text-decoration: none;
    box-shadow: var(--elevate-1);
    transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.guide-category-card:hover {
    transform: translateY(-4px);
    border-color: #cdb8df;
    box-shadow: var(--elevate-2, var(--elevate-1));
}

.guide-category-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a4ca5;
}

.guide-category-label {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 500;
    color: #0c0c0c;
}

.guide-category-view {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #7a4ca5;
}

.guide-category-arrow {
    display: flex;
    height: 36px;
    width: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #f1ebf7;
    transition: background-color 200ms, color 200ms;
}
.guide-category-arrow svg { height: 16px; width: 16px; transition: transform 200ms; }
.guide-category-card:hover .guide-category-arrow { background-color: #7a4ca5; color: #ffffff; }
.guide-category-card:hover .guide-category-arrow svg { transform: translateX(2px); }

/* Guide card grid (hub list and related) */

.guide-card-grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
}
@media (min-width: 768px) {
    .guide-card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
    .guide-card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The hub glow sits top-right rather than centred. */
.guide-hero-glow-right {
    left: auto;
    right: 0;
    width: 450px;
    transform: none;
    opacity: 0.7;
}

/* Outfit row in guides */

.guide-outfit-row {
    margin: 0;
}

.guide-outfit-caption {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.75;
    color: #545454;
}
@media (min-width: 768px) {
    .guide-outfit-caption { margin-bottom: 24px; font-size: 18px; line-height: 1.8; }
}

.guide-outfit-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
@media (min-width: 640px) {
    .guide-outfit-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
    .guide-outfit-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.guide-outfit-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid #e6dff0;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: var(--elevate-1);
    transition: transform 200ms, box-shadow 200ms;
}
.guide-outfit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevate-2, var(--elevate-1));
}

.guide-outfit-image-link {
    width: 100%;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

.guide-outfit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.guide-outfit-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.guide-outfit-title-link {
    text-decoration: none;
    color: inherit;
}

.guide-outfit-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #0c0c0c;
    line-height: 1.375;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.guide-outfit-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #545454;
    overflow: hidden;
}

.guide-outfit-username {
    font-weight: 500;
    color: #0c0c0c;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-outfit-handle {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-outfit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    overflow: hidden;
    max-height: 32px;
}

.guide-outfit-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    background-color: #f3edf9;
    font-size: 12px;
    color: #7a4ca5;
    font-weight: 500;
    flex-shrink: 0;
    text-decoration: none;
}