/* Expanded guide architecture: concern-based entry points and visual article cards. */
.guide-concern-panel{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:44px;margin-top:72px;padding:40px 42px;border:1px solid rgba(233,121,110,.22);border-radius:28px;background:radial-gradient(circle at 96% 4%,rgba(233,121,110,.15),transparent 34%),linear-gradient(145deg,rgba(255,253,249,.98),rgba(247,242,235,.82));box-shadow:0 18px 52px rgba(42,32,28,.055)}
.guide-concern-panel+.guide-principles{margin-top:24px}
.guide-concern-heading h2{margin:0 0 12px;font-size:clamp(1.55rem,3vw,2rem)}
.guide-concern-heading>p:last-child{margin:0;color:var(--color-muted);font-size:.9rem;line-height:1.9}
.guide-concern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-concern-grid a{display:grid;gap:7px;min-height:98px;padding:18px 19px;border:1px solid rgba(36,32,30,.1);border-radius:16px;background:rgba(255,253,249,.82);text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.guide-concern-grid a:hover{border-color:rgba(233,121,110,.42);box-shadow:0 13px 28px rgba(42,32,28,.06);transform:translateY(-2px)}
.guide-concern-grid strong{font-size:.9rem;line-height:1.65}
.guide-concern-grid span{align-self:end;color:#477565;font-family:var(--font-technical);font-size:.72rem;font-weight:600}

/* Related article imagery for the new guide cluster. */
.related-guide-grid article:has(a[href="/guide/matching-app-photo-count-order/"])::before{background-image:url('/assets/images/guide/matching-app-photo-count-order/matching-app-photo-count-order-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/main-profile-photo-selection/"])::before{background-image:url('/assets/images/guide/main-profile-photo-selection/main-profile-photo-selection-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/matching-app-sub-photo-types/"])::before{background-image:url('/assets/images/guide/matching-app-sub-photo-types/matching-app-sub-photo-types-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/smartphone-profile-photo-settings/"])::before{background-image:url('/assets/images/guide/smartphone-profile-photo-settings/smartphone-profile-photo-settings-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/profile-photo-posing-men/"])::before{background-image:url('/assets/images/guide/profile-photo-posing-men/profile-photo-posing-men-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/natural-profile-photo-expression/"])::before{background-image:url('/assets/images/guide/natural-profile-photo-expression/natural-profile-photo-expression-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/profile-photo-lighting/"])::before{background-image:url('/assets/images/guide/profile-photo-lighting/profile-photo-lighting-cover-1200x630.webp')}
.related-guide-grid article:has(a[href="/guide/matching-app-photo-ng-checklist/"])::before{background-image:url('/assets/images/guide/matching-app-photo-ng-checklist/matching-app-photo-ng-checklist-cover-1200x630.webp')}

/* Guide directory: turn the existing text-only markup into image-led editorial cards. */
.guide-category{position:relative;isolation:isolate}
.guide-category::before{position:absolute;z-index:-1;top:52px;right:0;color:rgba(233,121,110,.06);font-family:var(--font-display);font-size:clamp(7rem,15vw,11rem);font-weight:600;line-height:1;pointer-events:none}
#preparation::before{content:"01"}
#self-shooting::before{content:"02"}
#appearance::before{content:"03"}
#ai-photo::before{content:"04"}
#selection::before{content:"05"}
#safety::before{content:"06"}

.guide-category-header{position:relative;max-width:none;padding-right:126px}
.guide-category-header::after{position:absolute;right:0;bottom:7px;color:var(--color-muted);font-family:var(--font-technical);font-size:.69rem;font-weight:600;letter-spacing:.12em;white-space:nowrap}
#preparation .guide-category-header::after{content:"4 ARTICLES"}
#self-shooting .guide-category-header::after{content:"7 ARTICLES"}
#appearance .guide-category-header::after{content:"5 ARTICLES"}
#ai-photo .guide-category-header::after{content:"6 ARTICLES"}
#selection .guide-category-header::after{content:"5 ARTICLES"}
#safety .guide-category-header::after{content:"3 ARTICLES"}

.guide-card-grid-compact{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.guide-card-text{position:relative;grid-column:span 2;min-height:0;overflow:hidden;border-color:rgba(36,32,30,.11);background:rgba(255,253,249,.94);box-shadow:0 16px 42px rgba(42,32,28,.055)}
.guide-card-text::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background-color:var(--color-sage);background-position:center;background-size:cover;transition:transform .45s ease,filter .3s ease}
.guide-card-text:hover::before{transform:scale(1.025);filter:saturate(1.03)}
.guide-card-text .guide-card-content{position:relative;z-index:1;min-height:238px;padding:25px 26px 24px;background:linear-gradient(180deg,rgba(255,253,249,.96),var(--color-paper))}
.guide-card-text h3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.guide-card-text .guide-card-content>p:not(.guide-card-category){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.guide-card-text h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.guide-card-text .guide-card-link{position:relative;z-index:3}

/* The first article in each section is the editorial lead. */
.guide-card-grid-compact>.guide-card-text:first-child{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1.58fr) minmax(300px,.82fr);min-height:390px;border-color:rgba(233,121,110,.32);background:radial-gradient(circle at 94% 6%,rgba(233,121,110,.13),transparent 34%),var(--color-paper)}
.guide-card-grid-compact>.guide-card-text:first-child::before{height:100%;min-height:390px;aspect-ratio:auto;grid-column:1;grid-row:1;background-position:center}
.guide-card-grid-compact>.guide-card-text:first-child .guide-card-content{grid-column:2;grid-row:1;min-height:0;padding:34px 32px 31px;background:linear-gradient(145deg,rgba(255,253,249,.96),rgba(247,242,235,.9))}
.guide-card-grid-compact>.guide-card-text:first-child h3{font-size:clamp(1.35rem,2.5vw,1.75rem);line-height:1.65;-webkit-line-clamp:3}
.guide-card-grid-compact>.guide-card-text:first-child .guide-card-content>p:not(.guide-card-category){font-size:.92rem;-webkit-line-clamp:4}

/* Two-column sections are balanced after their lead article. */
#appearance .guide-card-text:not(:first-child),
#selection .guide-card-text:not(:first-child),
#safety .guide-card-text:not(:first-child){grid-column:span 3}
#ai-photo .guide-card-text:nth-last-child(-n+2){grid-column:span 3}

/* Temporary fallback for four articles whose dedicated covers are still pending. */
#selection .guide-card-text:has(a[href="/guide/profile-photo-cropping/"])::before,
#selection .guide-card-text:has(a[href="/guide/profile-photo-set-consistency/"])::before,
#safety .guide-card-text:has(a[href="/guide/photo-verification-vs-profile-photo/"])::before,
#safety .guide-card-text:has(a[href="/guide/ai-edited-photo-app-rules/"])::before{background-image:linear-gradient(rgba(247,242,235,.2),rgba(247,242,235,.2)),url('/assets/images/guide/hub/guide-cover-1200x630.webp')}

/* Article-page fallback cover for the same four guides. */
html:has(link[rel="canonical"][href$="/guide/profile-photo-cropping/"]) .article-header::after,
html:has(link[rel="canonical"][href$="/guide/profile-photo-set-consistency/"]) .article-header::after,
html:has(link[rel="canonical"][href$="/guide/photo-verification-vs-profile-photo/"]) .article-header::after,
html:has(link[rel="canonical"][href$="/guide/ai-edited-photo-app-rules/"]) .article-header::after{content:"";display:block;width:calc(100% + 108px);aspect-ratio:1200/630;margin:38px -54px -50px;border-top:1px solid var(--color-line);background:linear-gradient(rgba(247,242,235,.14),rgba(247,242,235,.14)),url('/assets/images/guide/hub/guide-cover-1200x630.webp') center/cover no-repeat}

/* Per-article cover mapping. */
.guide-card-text:has(a[href="/guide/matching-app-photo-no-photo/"])::before{background-image:url('/assets/images/guide/matching-app-photo-no-photo/matching-app-photo-no-photo-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/photo-preparation-comparison/"])::before{background-image:url('/assets/images/guide/photo-preparation-comparison/photo-preparation-comparison-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-cost/"])::before{background-image:url('/assets/images/guide/profile-photo-cost/profile-photo-cost-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-preparation-schedule/"])::before{background-image:url('/assets/images/guide/profile-photo-preparation-schedule/profile-photo-preparation-schedule-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/no-one-to-take-photo/"])::before{background-image:url('/assets/images/guide/no-one-to-take-photo/no-one-to-take-photo-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/selfie-or-other-photo/"])::before{background-image:url('/assets/images/guide/selfie-or-other-photo/selfie-or-other-photo-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/smartphone-profile-photo-settings/"])::before{background-image:url('/assets/images/guide/smartphone-profile-photo-settings/smartphone-profile-photo-settings-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-without-tripod/"])::before{background-image:url('/assets/images/guide/profile-photo-without-tripod/profile-photo-without-tripod-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-lighting/"])::before{background-image:url('/assets/images/guide/profile-photo-lighting/profile-photo-lighting-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-posing-men/"])::before{background-image:url('/assets/images/guide/profile-photo-posing-men/profile-photo-posing-men-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/natural-profile-photo-expression/"])::before{background-image:url('/assets/images/guide/natural-profile-photo-expression/natural-profile-photo-expression-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-clothing-men/"])::before{background-image:url('/assets/images/guide/profile-photo-clothing-men/profile-photo-clothing-men-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-background/"])::before{background-image:url('/assets/images/guide/profile-photo-background/profile-photo-background-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-grooming-men/"])::before{background-image:url('/assets/images/guide/profile-photo-grooming-men/profile-photo-grooming-men-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-glasses-accessories/"])::before{background-image:url('/assets/images/guide/profile-photo-glasses-accessories/profile-photo-glasses-accessories-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/profile-photo-cleanliness-check/"])::before{background-image:url('/assets/images/guide/profile-photo-cleanliness-check/profile-photo-cleanliness-check-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/ai-profile-photo-service-comparison/"])::before{background-image:url('/assets/images/guide/ai-profile-photo-service-comparison/ai-profile-photo-service-comparison-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/source-photo-guide/"])::before{background-image:url('/assets/images/guide/source-photo-guide/source-photo-guide-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/ai-photo-data-privacy/"])::before{background-image:url('/assets/images/guide/ai-photo-data-privacy/ai-photo-data-privacy-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/ai-photo-looks-different/"])::before{background-image:url('/assets/images/guide/ai-photo-looks-different/ai-photo-looks-different-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/ai-profile-photo-natural/"])::before{background-image:url('/assets/images/guide/ai-profile-photo-natural/ai-profile-photo-natural-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/matching-app-photo-editing/"])::before{background-image:url('/assets/images/guide/matching-app-photo-editing/matching-app-photo-editing-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/matching-app-photo-count-order/"])::before{background-image:url('/assets/images/guide/matching-app-photo-count-order/matching-app-photo-count-order-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/main-profile-photo-selection/"])::before{background-image:url('/assets/images/guide/main-profile-photo-selection/main-profile-photo-selection-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/matching-app-sub-photo-types/"])::before{background-image:url('/assets/images/guide/matching-app-sub-photo-types/matching-app-sub-photo-types-cover-1200x630.webp')}
.guide-card-text:has(a[href="/guide/matching-app-photo-ng-checklist/"])::before{background-image:url('/assets/images/guide/matching-app-photo-ng-checklist/matching-app-photo-ng-checklist-cover-1200x630.webp')}

@media(max-width:900px){
  .guide-concern-panel{grid-template-columns:1fr;gap:24px}
  .guide-card-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-card-text,
  #appearance .guide-card-text:not(:first-child),
  #selection .guide-card-text:not(:first-child),
  #safety .guide-card-text:not(:first-child),
  #ai-photo .guide-card-text:nth-last-child(-n+2){grid-column:span 1}
  .guide-card-grid-compact>.guide-card-text:first-child{grid-column:1/-1;grid-template-columns:1.2fr .8fr}
  .guide-card-grid-compact>.guide-card-text:first-child::before{min-height:340px}
}
@media(max-width:760px){
  .guide-concern-panel{margin-top:48px;padding:29px 22px;border-radius:22px}
  .guide-concern-grid{grid-template-columns:1fr}
  .guide-concern-grid a{min-height:0}
  .guide-category-header{padding-right:0}
  .guide-category-header::after{position:static;display:block;margin-top:14px}
  .guide-card-grid-compact{grid-template-columns:1fr;gap:20px}
  .guide-card-text,
  #appearance .guide-card-text:not(:first-child),
  #selection .guide-card-text:not(:first-child),
  #safety .guide-card-text:not(:first-child),
  #ai-photo .guide-card-text:nth-last-child(-n+2){grid-column:auto}
  .guide-card-grid-compact>.guide-card-text:first-child{display:flex;grid-column:auto;min-height:0;flex-direction:column}
  .guide-card-grid-compact>.guide-card-text:first-child::before{width:100%;height:auto;min-height:0;aspect-ratio:1200/630}
  .guide-card-grid-compact>.guide-card-text:first-child .guide-card-content,.guide-card-text .guide-card-content{min-height:0;padding:22px 20px 21px}
  .guide-card-grid-compact>.guide-card-text:first-child h3{font-size:1.2rem}
  .guide-category::before{top:68px;font-size:7rem}
  html:has(link[rel="canonical"][href$="/guide/profile-photo-cropping/"]) .article-header::after,
  html:has(link[rel="canonical"][href$="/guide/profile-photo-set-consistency/"]) .article-header::after,
  html:has(link[rel="canonical"][href$="/guide/photo-verification-vs-profile-photo/"]) .article-header::after,
  html:has(link[rel="canonical"][href$="/guide/ai-edited-photo-app-rules/"]) .article-header::after{width:calc(100% + 48px);margin:32px -24px -34px}
}
@media(prefers-reduced-motion:reduce){
  .guide-concern-grid a,.guide-card-text::before{transition:none}
  .guide-concern-grid a:hover{transform:none}
  .guide-card-text:hover::before{transform:none}
}