/* Guide index cards, inline figures, and comparison tables — /guides/ only. */
/* Guides index — visual card grid (site/guides/index.html), replacing a
plain stacked list of links with something that doesn't look like bare
text on an otherwise image-driven site. */
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1.25rem;
}
.guide-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: inherit;
text-decoration: none;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
border-color 0.2s var(--ease);
}
.guide-card:hover {
transform: translateY(-4px);
border-color: rgba(214, 41, 95, 0.4);
box-shadow: var(--shadow-lg);
}
.guide-figure {
margin: 0 0 1.25rem;
padding: 0;
border: 1px solid var(--line-soft);
border-radius: 12px;
overflow: hidden;
background: var(--surface-2);
}
.guide-figure img {
display: block;
width: 100%;
height: auto;
}
.guide-card__image {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1;
background: #efe8dc;
border-bottom: 1px solid var(--line-soft);
overflow: hidden;
}
.guide-card__image picture {
display: contents;
}
.guide-card__image img {
position: absolute;
inset: 1.5rem;
width: calc(100% - 3rem);
height: calc(100% - 3rem);
object-fit: contain;
object-position: center;
padding: 0;
box-sizing: border-box;
}
.guide-figure picture,
.guide-figure img {
max-width: 100%;
}
.related-guides {
max-width: 1100px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.policy-card .related-guides {
max-width: none;
margin: 0 0 2rem;
padding: 0;
}
.related-guides > h2 {
margin: 0 0 1rem;
font-size: 1.35rem;
}
.guide-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.5rem;
padding: 1.1rem 1.2rem 1.3rem;
}
.guide-card__body h2 {
margin: 0;
font-size: 1.05rem;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text);
}
.guide-card__body p {
margin: 0;
flex: 1;
color: var(--text-soft);
font-size: 0.9rem;
line-height: 1.6;
}
.guide-card__cta {
margin-top: 0.3rem;
font-weight: 700;
font-size: 0.88rem;
color: var(--primary-dark);
}
@media (max-width: 560px) {
.guide-grid {
grid-template-columns: 1fr;
}
}
.guide-byline {
margin: 0.35rem 0 0.85rem;
font-size: 0.88rem;
color: var(--muted);
}
.guide-table-wrap {
margin: 1.25rem 0 1.5rem;
overflow-x: auto;
}
.guide-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.guide-table caption {
caption-side: top;
text-align: left;
font-weight: 700;
margin-bottom: 0.55rem;
}
.guide-table th,
.guide-table td {
border: 1px solid var(--line);
padding: 0.55rem 0.7rem;
text-align: left;
vertical-align: top;
}
.guide-table th {
background: var(--surface-3, #f4f6f5);
font-weight: 700;
}
.guide-table-note {
margin: 0.45rem 0 0;
font-size: 0.82rem;
color: var(--muted);
}