/* TASK12.3: approved #fbf8f4 base; original PNGs and TASK12.2 banner geometry preserved. */
#alin03-app :is(.task12-subcard[data-category-card],.task12-heading[data-category-banner]){--sample-bg:#fbf8f4;background:#fbf8f4}
#alin03-app .subcategory-grid:has(.task12-subcard){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
#alin03-app .task12-subcard[data-category-card]{grid-column:auto;min-height:410px;padding:26px;display:flex;align-items:stretch}
#alin03-app .task12-subcard[data-category-card] .nav-card-copy{width:50%;max-width:50%;min-height:356px;height:100%;padding:0 0 52px;display:flex;flex-direction:column}
#alin03-app .task12-subcard[data-category-card] h3{font-size:24px;line-height:1.22;overflow-wrap:normal;hyphens:none}
#alin03-app .task12-subcard[data-category-card] p{font-size:12px;line-height:1.6;max-width:90%}
#alin03-app .task12-subcard[data-category-card] .card-count{margin-top:16px}
#alin03-app .task12-subcard[data-category-card] .task12-card-art{inset:auto 0 0;width:100%;height:74%;object-fit:cover;object-position:right bottom;mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(180deg,transparent 0%,#000 13%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(180deg,transparent 0%,#000 13%);mask-composite:intersect;-webkit-mask-composite:source-in}
/* Wider source ratios use more horizontal field to retain all original packages. */
#alin03-app .task12-subcard:is([data-category-card="L03"],[data-category-card="P01"]) .task12-card-art{height:67%}
#alin03-app .task12-heading[data-category-banner] .task12-banner-art{mask-image:linear-gradient(90deg,transparent 0%,#000 32%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
#alin03-app .category-picker{position:relative;display:flex;align-items:center;min-width:0;min-height:54px;padding:13px 40px 13px 14px;background:#fff;border:1px solid var(--line);color:var(--ink)}
#alin03-app .category-picker::after{content:'⌄';position:absolute;right:14px;top:50%;transform:translateY(-60%);font-size:20px;pointer-events:none}
#alin03-app .category-picker-label{display:block;font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:normal;word-break:normal;min-width:0}
#alin03-app .category-picker select{position:absolute;inset:0;width:100%;height:100%;min-height:100%;opacity:0;cursor:pointer}
#alin03-app .category-picker:focus-within{outline:2px solid #8b6a50;outline-offset:2px}
@media(max-width:1040px){
 #alin03-app .subcategory-grid:has(.task12-subcard){grid-template-columns:1fr}
 #alin03-app .task12-subcard[data-category-card]{min-height:370px;padding:28px}
 #alin03-app .task12-subcard[data-category-card] .nav-card-copy{width:44%;max-width:44%;min-height:312px}
 #alin03-app .task12-subcard[data-category-card] h3{font-size:28px}
 #alin03-app .task12-subcard[data-category-card] p{font-size:14px}
 #alin03-app .task12-subcard[data-category-card] .task12-card-art{inset:0 0 0 auto;width:83%;height:100%;mask-image:linear-gradient(90deg,transparent 0%,#000 29%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 29%);mask-composite:add;-webkit-mask-composite:source-over}
}
@media(max-width:560px){
 #alin03-app .subcategory-grid:has(.task12-subcard){gap:20px}
 #alin03-app .task12-subcard[data-category-card]{display:block;min-height:0;padding:24px 24px calc(50vw + 16px)}
 #alin03-app .task12-subcard[data-category-card] .nav-card-copy{width:100%;max-width:100%;height:auto;min-height:230px;padding:0 0 55px}
 #alin03-app .task12-subcard[data-category-card] h3{font-size:26px;line-height:1.25}
 #alin03-app .task12-subcard[data-category-card] p{font-size:13px;max-width:100%}
 #alin03-app .task12-subcard[data-category-card] .task12-card-art{inset:auto 0 0;width:100%;height:50vw;mask-image:linear-gradient(180deg,transparent 0%,#000 23%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 23%)}
}
@media(max-width:800px){#alin03-app .task12-heading[data-category-banner] .task12-banner-art{mask-image:linear-gradient(180deg,transparent 0%,#000 24%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}}
