/* Patio budgeting guide: use the established palette, type, and article shell. */
.patio-budget-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.patio-budget-hero__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.patio-budget-hero__photo img { width: 100%; height: auto; }
.blog-article--patio-budget .content-section { max-width: 920px; margin-inline: auto; border-top: 5px solid var(--color-primary); }
.patio-budget-table caption { text-align: left; color: var(--color-primary-dark); font-weight: var(--fw-semibold); padding-bottom: 0.75rem; }
.patio-budget-note { font-size: var(--fs-sm); border-left: 3px solid var(--color-primary); padding-left: 1rem; }
.patio-budget-steps { list-style: decimal; padding-left: 1.5rem; margin: 1.5rem 0; }
.patio-budget-steps li { padding-left: 0.3rem; margin-bottom: 1rem; color: var(--color-text-muted); }
.patio-budget-steps strong { color: var(--color-text); }
.blog-article--patio-budget .content-section a:not(.btn) { text-decoration: underline; text-underline-offset: 0.2em; }
.blog-card--patio-budget .blog-card__img img { object-position: center 68%; }
@media (max-width: 768px) {
  .patio-budget-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .patio-budget-hero__photo { width: min(100%, 300px); margin-inline: auto; }
  .patio-budget-table caption { display: block; }
  .patio-budget-table td { overflow-wrap: anywhere; }
  .blog-card--patio-budget .blog-card__img { aspect-ratio: 3 / 2; }
}
/* Let the featured card's copy determine its height rather than the portrait's intrinsic height. */
.blog-card--patio-budget .blog-card__img { position: relative; }
.blog-card--patio-budget .blog-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }