/* ==========================================================================
   Gardening page — page-specific styles.
   Loaded after design-system.css and homepage.css; reuses their tokens and
   shared components (disclaimer, placeholder-note, botanical-frame,
   footer, hero-ctas, photo-frame) rather than redefining them.
   Prototype only — not committed, not deployed.
   ========================================================================== */

/* Radio-button groups for the consultation request form (#garden-consult-form
   in the Cost & Booking section). contact.css supplies .contact-form,
   .form-group, .hp-field, .form-status for the text inputs this form
   shares with the contact form; fieldset/legend/radio styling lives here
   since the contact form has no radio groups to style. */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
}
.form-fieldset legend {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  padding: 0;
}
.form-fieldset .radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  margin-right: var(--space-5);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  cursor: pointer;
}
.form-fieldset .radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-forest);
  cursor: pointer;
}

/* Simple bulleted list for the service-scope items — same pattern as
   nutrition.css's/shop.css's .fit-list, redefined here rather than
   cross-loading another page's stylesheet for one small component. */
.scope-list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .scope-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
.scope-list li {
  position: relative;
  padding-left: 1.3em;
  font-size: 16px;
}
.scope-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Real-garden photo gallery — a grid of plain photo-frames, no card
   chrome (no price, no title needed), letting the photography itself
   carry the section per docs/design-reference-extraction.md's repeated
   finding that unstyled, real documentary photography reads more
   credible than anything else on this site. */
.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .photo-gallery { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .photo-gallery { grid-template-columns: 1fr 1fr 1fr; }
}
.photo-gallery figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}