/* Shed World page CSS: only what sits inside a visual or a form panel and the kit lacks. */

/* picture-develops: the section's one photograph, beside the text, as tall as the text column allows */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(600px, var(--ly-fit, 600px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* the sign-up form panel (booking-form recipe: the form on --g-alt, 48px padding) */
.section-head + .form { margin-top: var(--s-7); }
@media (max-width: 639px) { .section-head + .form { margin-top: var(--s-6); } }

/* a linked row in a list: the whole row is the link */
.rows > li > a { display: contents; color: inherit; text-decoration: none; }
.rows > li > a .rows__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--dur, 200ms) var(--ease, ease); }
.rows > li > a:hover .rows__name { text-decoration-color: currentColor; }
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-body); margin-top: var(--s-1); }
.latest__more { margin-top: var(--s-6); }

/* a linked photograph frame */
.latest__feature { display: block; overflow: hidden; border-radius: var(--r-lg); height: min(600px, var(--ly-fit, 600px)); }
.latest__feature > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease, ease); }
.latest__feature:hover > img { transform: scale(1.03); }
@media (max-width: 1023px) { .latest__feature { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

@media (min-width: 640px) and (max-width: 1023px) { .develop, .latest__feature { aspect-ratio: 5 / 2; } }
@media (max-width: 639px) { .develop, .latest__feature { aspect-ratio: 4 / 5; margin-top: 0; } }

.footer .footer__col--wide { grid-column: auto / span 4; }
@media (min-width: 640px) and (max-width: 1023px) { .footer .footer__col--wide { grid-column: auto / span 6; } }
@media (max-width: 639px) { .footer .footer__col--wide { grid-column: 1 / -1; } }

/* footer note: the affiliate disclosure */
.footer__note { font-size: var(--t-body); line-height: 1.6; max-width: 44ch; margin-top: var(--s-2); }

/* the cost table: a plain table on the rows look */
.cost-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--t-body); line-height: 1.5; }
.cost-table thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); padding-top: 0; }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.cost-table tfoot td { font-weight: 500; border-bottom: 0; padding-top: var(--s-4); }
@media (max-width: 639px) {
  .cost-table .qty { display: none; }
  .cost-table th, .cost-table td { padding-block: var(--s-2); }
}

/* the example-pick tag inside a materials row */
.pick { display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-label); font-weight: 500; line-height: 1.6; vertical-align: 2px; }

/* opened from disk (file://), where module scripts do not run: the phone menu still opens (site.js) */