/* 첫 화면 구역 (core/home.html; ADR-0017 decision 6): under the hero, the issue and award
   cards, 협회 공지 and 행사사진, then the garden. The hero, .head, .more, .chip, .ph and the
   work cards come from site.css (literature.css, media.css and magazine.css add theirs).
   Tokens only, one light palette; forced colours keep every card's edge. Cards follow the
   prototype's .card (surface, hairline border, large radius): a title link stretched over
   its card is the card's one link, so a card is one Tab stop and one large target. */

/* One gap between sections (the block padding of site.css, also on the cards' own <div>):
   the first after the hero keeps its top padding, whichever it is. */
[data-route="home"] .home-sec{padding-block:clamp(56px,8vw,100px)}
[data-route="home"] .home-sec+.home-sec{padding-top:0}

/* ── Cards whose title link covers them (its ::after; R5-SR-02: heading first in the
   source, CSS shows the picture or the label above it) ── */
.home-link{position:relative}
.home-sec .stretch{color:inherit;text-decoration:none}
.home-sec .stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.home-sec .stretch:focus-visible{outline:none;box-shadow:none}
.home-sec .stretch:focus-visible::after{outline:3px solid var(--focus);outline-offset:-4px}
.home-photo .stretch::after{border-radius:18px}
.home-photo .stretch:focus-visible::after{outline-offset:4px}
/* Another link inside a stretched card stays on top of it. */
.home-link .home-card-more{position:relative;z-index:2}
.home-link{transition:transform 220ms var(--ease-out),box-shadow 220ms ease}
@media (hover:hover) and (pointer:fine){
  .home-link:is(.home-card,.home-notice):hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px var(--shadow)}
  .home-link:hover .stretch{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  .home-photo:hover .ph{box-shadow:0 10px 24px -14px var(--shadow)}
}
.home-link:is(.home-card,.home-notice):active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.home-link:is(:hover,:active){transform:none}}
:root[data-motion="off"] .home-link:is(:hover,:active){transform:none}

/* ── 이달의 민들레 향기 and the award card: one row from 40em, stacked below ── */
.home-duo{display:grid;gap:16px}
@media (min-width:40em){.home-duo.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home-card{display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(20px,2.4vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.home-card-title{font-size:clamp(1.3rem,1.9vw,1.65rem);font-weight:500;letter-spacing:-.025em}
.home-card-more{margin-top:auto}

/* The cover beside the text while both fit, the text under the cover when they do not (a
   wrapping row: no breakpoint, the card's own width decides). */
.home-issue-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px}
.home-issue-cover{flex:none;width:clamp(120px,30%,168px)}
.home-issue .cover{padding:14px;border-radius:14px;box-shadow:0 18px 36px -24px var(--shadow)}
.home-issue .cover .vol{font-size:.66rem}
.home-issue .cover .cover-title{font-size:1.15rem}
.home-issue .cover svg{top:34px}
.home-issue .cover.cover-photo{padding:0}
.home-issue-text{flex:1 1 12em;min-width:0;display:flex;flex-direction:column;gap:8px}
.home-issue-label{font-size:.9rem;font-weight:600;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.home-issue h3{font-size:clamp(1.45rem,2.3vw,1.9rem);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.home-issue-theme{font-weight:600;color:var(--ink-2)}
.home-issue-note{color:var(--ink-2)}

/* Award works in rank order: the rank chip, then the title (a link) over the pen name, and a
   taste of the text (apps.literature.selectors.snippet: two lines at most). Under the name on
   a phone; on the right once the card is wide enough to hold it (a container query: an engine
   without them keeps the stacked rows). Every row is as tall as the tallest. */
.home-award-list{display:grid;grid-auto-rows:1fr;flex:1 1 auto;border-bottom:1px solid var(--line);container-type:inline-size}
.home-award-list li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rank title" "rank by" "ex ex";column-gap:14px;align-items:start;align-content:center;padding-block:16px;border-top:1px solid var(--line)}
.home-award-list .chip{grid-area:rank;justify-content:center;min-width:5em;margin-top:.3em;font-size:.8rem}
.home-award-title{grid-area:title;font-family:var(--serif);font-size:1.12rem;font-weight:500;letter-spacing:-.02em;text-decoration:none}
/* The title link covers its row (its ::after, as the cards above): a row is one Tab stop and one
   large target; the title alone was a 31px-high line. */
.home-award-title::after{content:"";position:absolute;inset:0;border-radius:12px}
.home-award-title:focus-visible{outline:none;box-shadow:none}
.home-award-title:focus-visible::after{outline:3px solid var(--focus);outline-offset:-3px}
.home-award-list li:hover .home-award-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.home-award-by{grid-area:by;font-size:.9rem;color:var(--muted)}
.home-award-ex{grid-area:ex;margin:6px 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
@container (min-width:30rem){
  .home-award-list li{grid-template-columns:auto minmax(0,10rem) minmax(0,1fr);grid-template-areas:"rank title ex" "rank by ex";column-gap:14px;align-items:start}
  .home-award-ex{margin:2px 0 0}
}

/* ── 협회 공지: three cards in a row from 56.25em, one column below ── */
.home-notices{display:grid;gap:16px}
@media (min-width:56.25em){.home-notices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-notice{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(20px,2.4vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.home-notice h3{font-size:1.2rem;font-weight:500;letter-spacing:-.02em;line-height:1.45}
.home-date{font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.home-notice .home-date{margin-top:auto}

/* ── 행사사진: three photos in a row from 37.5em (as the photo page's grid sizes say),
   one column below; one 4:3 frame each, the whole picture's middle shown ── */
.home-photos{display:grid;gap:24px 16px}
@media (min-width:37.5em){.home-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-photo{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-photo .ph{order:-1;margin-bottom:10px;aspect-ratio:4/3;background:var(--sunk);transition:box-shadow 220ms ease}
.home-photo .ph :is(picture,img,.media-placeholder,.scene){display:block;width:100%;height:100%}
.home-photo .ph img{object-fit:contain} /* the whole photo, never cropped; the box's --sunk shows around it */
.home-photo h3{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;line-height:1.45}
/* Phones: each photo a row — the picture beside its title and date, as news lists on
   phones do — so three photos take one screen instead of three. */
@media (max-width:37.49em){
  .home-photos{gap:16px}
  .home-photo{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);grid-template-areas:"pic title" "pic date";grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;align-items:start}
  .home-photo .ph{grid-area:pic;margin:0}
  .home-photo h3{grid-area:title;font-size:1.05rem}
  .home-photo .home-date{grid-area:date}
  .home-photo .ph-note{left:6px;bottom:6px}
}
/* Phones: the issue's label, the rank chips and the pen names at the site's 15px floor for
   information (site.css, ADR-0017 decision 13). */
@media (max-width:640px){
  .home-issue-label,.home-award-by,.home-award-list .chip,.home-photo .ph-note{font-size:.9375rem}
}

@media (forced-colors:active){
  .home-card,.home-notice{border:1px solid CanvasText}
  .home-sec .stretch:focus-visible::after{outline-color:Highlight}
}