/* =========================================================
   June & Aurora — FAVORITES 页面正文
   文件：june-aurora-favorites-content.css
   依赖：june-aurora-common.css
   ========================================================= */

:root{--favorites-paper:var(--paper,#fffdf8);--favorites-black:var(--black,#151515);--favorites-orange:var(--orange,#e8753d);--favorites-orange-light:var(--orange-light,#f4c5a6);--favorites-muted:var(--muted,#6f675f);--favorites-line:var(--line,rgba(21,21,21,.18));--favorites-display:var(--cover-display,"Bebas Neue","Arial Narrow",sans-serif);--favorites-serif:var(--serif,"Cormorant Garamond",Georgia,serif)}

/* =========================================================
   01. 公共区块
   ========================================================= */

.favorites-featured,.favorites-gallery-section,.favorite-notes-section,.favorites-archive-section{padding:90px 0;border-bottom:1px solid var(--favorites-line)}

/* =========================================================
   02. Section Heading
   ========================================================= */

.favorites-section-heading{margin-bottom:38px;display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:24px;align-items:center}
.favorites-section-heading>div:first-child{display:flex;align-items:center;gap:13px}
.favorites-section-number{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--favorites-paper);background:var(--favorites-orange);border-radius:50%;font-size:9px;font-weight:700;letter-spacing:.06em}
.favorites-section-heading p{margin:0;color:var(--favorites-black);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.favorites-section-line{height:1px;background:var(--favorites-line)}
.favorites-section-date{color:var(--favorites-muted);font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* =========================================================
   03. Featured Favorite
   ========================================================= */

.featured-favorite{display:grid;grid-template-columns:1.12fr .88fr;gap:58px;align-items:stretch}
.featured-favorite-image{position:relative;min-height:600px;overflow:hidden;background:linear-gradient(135deg,#e8ddd0,#c6a98b 46%,#71594a);border:1px solid var(--favorites-line);border-radius:var(--radius-large)}
.featured-favorite-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(21,21,21,.22));pointer-events:none}
.featured-favorite-shape{position:absolute;display:block}
.featured-favorite-image .shape-one{top:10%;left:9%;width:48%;height:64%;background:#eee3d6;transform:rotate(-4deg)}
.featured-favorite-image .shape-two{top:24%;left:43%;width:34%;height:42%;background:var(--favorites-orange);border-radius:48% 52% 45% 55%;opacity:.82}
.featured-favorite-image .shape-three{right:8%;bottom:10%;width:29%;height:34%;background:#25201c;clip-path:polygon(50% 0,100% 100%,0 100%)}
.featured-favorite-label{position:absolute;left:24px;bottom:22px;z-index:2;color:var(--favorites-paper);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.featured-favorite-copy{padding:38px 10px;display:flex;flex-direction:column;justify-content:center}
.favorite-category{color:var(--favorites-orange);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.featured-favorite-copy h2{margin:23px 0 25px;color:var(--favorites-black);font-family:var(--favorites-serif);font-size:clamp(52px,5vw,78px);font-weight:500;line-height:.9;letter-spacing:-.025em}
.featured-favorite-copy h2 em{display:block;color:var(--favorites-orange);font-weight:500}
.featured-favorite-copy p{max-width:520px;color:var(--favorites-muted);font-size:12px;line-height:1.75}
.featured-favorite-copy .featured-favorite-lead{color:var(--favorites-black);font-family:var(--favorites-serif);font-size:22px;line-height:1.4}
.favorites-read-link{width:fit-content;margin-top:28px;display:inline-flex;align-items:center;gap:18px;color:var(--favorites-black);font-size:9px;font-weight:700;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}
.favorites-read-link span{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--favorites-paper);background:var(--favorites-orange);border-radius:50%;font-size:16px;transition:transform .2s ease}
.favorites-read-link:hover span,.favorites-read-link:focus-visible span{transform:translateX(4px)}



/* =========================================================
   04. Favorites Grid
   ========================================================= */

.favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 30px}
.favorite-card{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:56px;
    align-items:center;
}
.favorite-card-large{grid-column:1/-1;grid-template-columns:1.18fr .82fr}
.favorite-card-image{position:relative;min-height:390px;overflow:hidden;border:1px solid var(--favorites-line);border-radius:var(--radius-large);text-decoration:none;background:var(--soft-gray)}
.favorite-card-large .favorite-card-image{min-height:540px}
.favorite-card-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,rgba(21,21,21,.22));pointer-events:none}
.favorite-number{position:absolute;top:15px;left:15px;z-index:2;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--favorites-paper);background:var(--favorites-orange);border-radius:50%;font-size:9px;font-weight:700}
.favorite-type{position:absolute;right:17px;bottom:15px;z-index:2;color:var(--favorites-paper);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* =========================================================
   05. 图片占位背景
   后续可直接替换为真实图片
   ========================================================= */

.favorite-image-one{background:linear-gradient(135deg,#d8c3ae,#8f6c50 58%,#3f3027)}
.favorite-image-two{background:radial-gradient(circle at 62% 40%,#b97448 0 13%,transparent 14%),linear-gradient(135deg,#eee1d1,#ba9a7c)}
.favorite-image-three{background:linear-gradient(145deg,#d6cfbf 0 46%,#776d5f 47% 65%,#2d2925 66%)}
.favorite-image-four{background:radial-gradient(circle at 52% 48%,#f4d5bb 0 18%,transparent 19%),linear-gradient(145deg,#d8a47d,#684a3b)}
.favorite-image-five{background:linear-gradient(145deg,#d7cdc0,#918275 55%,#38302b)}

/* =========================================================
   06. Favorite Card Copy
   ========================================================= */

.favorite-card-copy{padding:15px 0;display:flex;flex-direction:column;justify-content:center}
.favorite-meta{color:var(--favorites-orange);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.favorite-card-copy h2{margin:16px 0 15px;color:var(--favorites-black);font-family:var(--favorites-serif);font-size:clamp(35px,3vw,49px);font-weight:500;line-height:.96;letter-spacing:-.02em}
.favorite-card-large .favorite-card-copy h2{font-size:clamp(48px,5vw,72px)}
.favorite-card-copy p{margin:0;color:var(--favorites-muted);font-size:11px;line-height:1.7}
.favorite-card-copy>a{width:fit-content;margin-top:23px;color:var(--favorites-black);font-size:9px;font-weight:700;text-underline-offset:5px;transition:color .2s ease}
.favorite-card-copy>a:hover,.favorite-card-copy>a:focus-visible{color:var(--favorites-orange)}

/* =========================================================
   07. June's Notes
   ========================================================= */

.favorite-notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.favorite-note{min-height:270px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,253,248,.68);border:1px solid var(--favorites-line);border-radius:var(--radius-large)}
.favorite-note-index{font-family:var(--favorites-display);font-size:58px;line-height:.8;color:var(--favorites-orange)}
.favorite-note-meta{font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--favorites-muted)}
.favorite-note h3{margin:14px 0 10px;color:var(--favorites-black);font-family:var(--favorites-serif);font-size:30px;font-weight:500;line-height:1}
.favorite-note p{margin:0;color:var(--favorites-muted);font-size:11px;line-height:1.7}

/* =========================================================
   08. Favorites Archive / By Shelf
   ========================================================= */

.favorites-archive{border-top:1px solid var(--favorites-black)}
.favorites-archive-item{min-height:120px;padding:20px 0;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:35px;align-items:center;border-bottom:1px solid var(--favorites-line)}
.favorites-archive-label{font-family:var(--favorites-display);font-size:43px;line-height:.9;color:var(--favorites-orange);text-transform:uppercase}
.favorites-archive-content h3{margin:0 0 7px;color:var(--favorites-black);font-family:var(--favorites-serif);font-size:30px;font-weight:500}
.favorites-archive-content p{max-width:650px;margin:0;color:var(--favorites-muted);font-size:11px;line-height:1.65}
.favorites-archive-link{display:inline-flex;align-items:center;gap:12px;color:var(--favorites-black);font-size:9px;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.favorites-archive-link span{color:var(--favorites-orange);font-size:18px;transition:transform .2s ease}
.favorites-archive-link:hover span,.favorites-archive-link:focus-visible span{transform:translateX(4px)}

/* =========================================================
   09. Ending
   ========================================================= */

.favorites-ending{margin:75px 0 35px;padding:55px 60px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:center;color:var(--favorites-paper);background:var(--favorites-orange);border-radius:var(--radius-large)}
.favorites-ending-label{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.favorites-ending h2{max-width:800px;margin:15px 0 18px;font-family:var(--favorites-serif);font-size:clamp(45px,5vw,72px);font-weight:500;line-height:.92;letter-spacing:-.02em}
.favorites-ending p{max-width:650px;margin:0;font-size:12px;line-height:1.7}
.favorites-ending-button{width:150px;height:150px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--favorites-black);background:var(--favorites-paper);border:1px solid var(--favorites-black);border-radius:50%;font-size:9px;font-weight:700;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:transform .25s ease}
.favorites-ending-button:hover,.favorites-ending-button:focus-visible{transform:scale(1.05)}

/* =========================================================
   10. Hover
   ========================================================= */

.favorite-card-image{
    aspect-ratio:1/1;
    width:100%;
    overflow:hidden;
    border-radius:22px;
}

.favorite-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.favorite-card:hover .favorite-card-image{transform:translateY(-3px)}
.favorite-card-image:focus-visible{outline:2px solid var(--favorites-orange);outline-offset:3px}
.favorites-read-link:focus-visible,.favorites-archive-link:focus-visible,.favorite-card-copy>a:focus-visible{outline:2px solid var(--favorites-orange);outline-offset:4px}

.favorite-card-placeholder{width:100%;height:100%;min-height:390px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8ddd0,#b89b80);color:var(--favorites-paper);}
.favorite-card-placeholder span{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.favorite-date{margin-top:14px;color:var(--favorites-muted);font-family:var(--favorites-serif);font-size:13px;font-style:italic;}
.favorite-summary:empty{display:none;}
.favorites-pagination{margin-top:48px;display:flex;justify-content:center;}
.favorites-empty{padding:80px 30px;text-align:center;border:1px solid var(--favorites-line);border-radius:var(--radius-large);background:var(--favorites-paper);}
.favorites-empty-label{color:var(--favorites-orange);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.favorites-empty h2{margin:14px 0 0;font-family:var(--favorites-serif);font-size:42px;font-weight:500;}
.favorites-empty p{margin:12px 0 0;color:var(--favorites-muted);font-size:11px;}

/* =========================================================
   11. 超宽桌面
   ========================================================= */

@media(min-width:1500px){
.featured-favorite-image{min-height:670px}
.favorite-card-image{min-height:420px}
.favorite-card-large .favorite-card-image{min-height:600px}
.favorite-grid{gap:80px 36px}
}

/* =========================================================
   12. 平板 / 小桌面
   ========================================================= */

@media(max-width:1100px){
.featured-favorite{grid-template-columns:1fr}
.featured-favorite-image{min-height:520px}
.featured-favorite-copy{padding:20px 0}
.favorite-grid{grid-template-columns:1fr}
.favorite-card-large{grid-column:auto}
.favorite-card,.favorite-card-large{grid-template-columns:.9fr 1.1fr}
.favorite-notes-grid{grid-template-columns:1fr}
.favorites-ending{grid-template-columns:1fr}
}

/* =========================================================
   13. 手机
   ========================================================= */

@media(max-width:760px){
.favorites-featured,.favorites-gallery-section,.favorite-notes-section,.favorites-archive-section{padding:65px 0}
.favorites-section-heading{grid-template-columns:auto 1fr;gap:15px}
.favorites-section-date{display:none}
.featured-favorite-image{min-height:390px}
.featured-favorite-copy h2{font-size:52px}
.favorite-card,.favorite-card-large{display:block}
.favorite-card-image,.favorite-card-large .favorite-card-image{min-height:330px}
.favorite-card-copy{padding:25px 0 10px}
.favorite-card-copy h2,.favorite-card-large .favorite-card-copy h2{font-size:42px}
.favorites-archive-item{grid-template-columns:1fr;gap:12px;padding:28px 0}
.favorites-archive-link{margin-top:7px}
.favorites-ending{padding:40px 28px;grid-template-columns:1fr}
.favorites-ending-button{width:120px;height:120px}
}

/* =========================================================
   14. 小屏手机
   ========================================================= */

@media(max-width:430px){
.featured-favorite-copy h2{font-size:45px}
.featured-favorite-image{min-height:340px}
.favorite-card-image,.favorite-card-large .favorite-card-image{min-height:290px}
.favorite-card-copy h2,.favorite-card-large .favorite-card-copy h2{font-size:37px}
.favorites-ending h2{font-size:38px}
.favorites-ending-button{width:105px;height:105px}
}

/* =========================================================
   15. Reduced Motion
   ========================================================= */

@media(prefers-reduced-motion:reduce){
.favorite-card-image,.favorites-read-link span,.favorites-archive-link span,.favorites-ending-button{transition:none!important}
.favorite-card:hover .favorite-card-image,.favorites-ending-button:hover{transform:none}
}