/* /resources/css/golden-ratio.css — diagrams and real-world gallery for golden-ratio.html.
   Button/legend/message/result/formula styling for the spiral demo is shared from
   step-demo.css; this file holds the bar diagram, spiral square/arc reveal states,
   and the illustrated real-world gallery cards. */

/* ---- "a + b" definition bar ---- */
.gr-bar-wrap { text-align: center; margin: 14px 0 6px; }
.gr-bar-wrap svg { max-width: 100%; height: auto; }

/* ---- Golden spiral step-demo ---- */
.gr-spiral-wrap { text-align: center; margin: 10px 0 6px; }
.gr-spiral-wrap svg { max-width: 100%; height: auto; }
.gr-sq { opacity: 0; transition: opacity 0.5s ease; }
.gr-sq.gr-shown { opacity: 1; }
.gr-arc { opacity: 0; transition: opacity 0.6s ease; }
.gr-arc.gr-shown { opacity: 1; }
.gr-ratio-tag {
  font-family: monospace; font-weight: 800; font-size: 0.68rem;
  fill: #1e293b; text-anchor: middle; opacity: 0; transition: opacity 0.5s ease;
}
.gr-ratio-tag.gr-shown { opacity: 1; }

/* ---- Real-world gallery ---- */
.gr-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 18px 0 10px;
}
.gr-gallery-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gr-gallery-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.gr-gallery-figure {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 10px 6px; min-height: 190px;
}
.gr-gallery-figure svg { max-width: 100%; height: auto; }
.gr-gallery-body { padding: 14px 18px 18px; }
.gr-gallery-title { font-weight: 800; font-size: 1rem; color: #1f2937; margin: 0 0 6px; }
.gr-gallery-text { font-size: 0.9rem; line-height: 1.6; color: #4b5563; margin: 0; }

@media (max-width: 500px) {
  .gr-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gr-gallery-figure { min-height: 150px; padding: 12px 6px 4px; }
}
@media (max-width: 360px) {
  .gr-gallery { grid-template-columns: 1fr; }
}