/* Reportage Ruesselsheim: nur die Bildanordnung dieser Reportage.
   Gemeinsame Gestaltung: /css/reportage.css (vorher laden). */

.church-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--image-gap); align-items: start; }

.church-exterior { grid-column: 1 / span 7; }

.church-tower { grid-column: 8 / -1; }

.church-interior { grid-column: 1 / -1; margin-top: clamp(.5rem, 1vw, .8rem); }

.ceremony-flow { display: grid; gap: var(--image-gap); }

.ceremony-wide { width: min(calc(100% - 2 * var(--page-gutter)), 1120px); margin-inline: auto; }

.ceremony-pair { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--image-gap); align-items: start; }

.ceremony-pair--mixed .ceremony-portrait { grid-column: 1 / span 4; }

.ceremony-pair--mixed .ceremony-landscape { grid-column: 5 / -1; }

.pair-shift { margin-top: 0; }

.ceremony-pair--candle { align-items: end; }

.ceremony-pair--candle .chapter-photo { grid-column: 1 / span 8; margin-top: 0; }

.ceremony-pair--candle .candle-photo { grid-column: 9 / -1; }

.ritual-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--image-gap); align-items: end; }

.ritual-oil { grid-column: 1 / span 4; }

.ritual-anointing { grid-column: 5 / -1; margin-top: 0; }

.baptism-photo { grid-column: 2 / span 10; margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(.55rem, 1vw, .85rem); border: 1px solid var(--border); }

.ritual-closing { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--image-gap); align-items: end; margin-top: clamp(2rem, 4vw, 3.5rem); }

.tonsure-photo { grid-column: 1 / span 4; }

.ritual-after-pair { grid-column: 5 / -1; display: grid; gap: var(--image-gap); }

.comfort-photo { margin-top: 0; }

.after-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--image-gap); align-items: start; }

.after-grid > .story-figure:first-child { grid-column: 1 / span 6; }

.after-shift { grid-column: 7 / -1; margin-top: 0; }

.priest-photo { grid-column: 3 / span 4; margin-top: clamp(2rem, 4vw, 3.5rem); }

.communion-photo { grid-column: 7 / span 4; margin-top: clamp(2rem, 4vw, 3.5rem); }

.family-section { background: radial-gradient(circle at 50% 42%, rgba(199,164,102,.085), transparent 38%), #0f0d0b; }

.family-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--image-gap); }

.family-photo { width: 100%; margin-inline: auto; }

.reception-grid { display: grid; gap: var(--image-gap); }

.reception-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--image-gap); align-items: start; width: min(calc(100% - 2 * var(--page-gutter)), 1120px); margin-inline: auto; }

.reception-guests { margin-top: 0; }

.reception-closing { width: min(calc(100% - 2 * var(--page-gutter)), 920px); margin: clamp(2rem, 4vw, 3.5rem) auto 0; }

@media (max-width: 720px) {
    .church-grid { display: block; }

    .church-exterior { width: 100%; margin: 0; }

    .church-tower { width: 64%; margin: var(--image-gap) auto 0; }

    .church-interior { width: 100%; margin-top: var(--image-gap); }

    .church-interior .story-caption { padding-inline: var(--page-gutter); }

    .ceremony-flow { gap: var(--image-gap); }

    .ceremony-wide { width: 100%; }

    .ceremony-pair { gap: var(--image-gap); }

    .ceremony-pair--mixed { display: block; }

    .ceremony-pair--mixed .ceremony-portrait { width: 58%; margin-inline: auto; }

    .ceremony-pair--mixed .ceremony-landscape { width: 100%; margin-top: var(--image-gap); }

    .pair-shift { margin-top: 0; }

    .ceremony-pair--candle { display: block; }

    .ceremony-pair--candle .chapter-photo { width: 100%; margin: 0; }

    .ceremony-pair--candle .candle-photo { width: 58%; margin: var(--image-gap) auto 0; }

    .chapter-photo .story-caption { padding-inline: var(--page-gutter); }

    .ritual-grid { display: block; }

    .ritual-oil { width: 58%; margin-inline: auto; }

    .ritual-anointing { width: 100%; margin-top: var(--image-gap); }

    .ritual-anointing .story-caption { padding-inline: var(--page-gutter); }

    .baptism-photo { width: 100%; margin: 2.4rem auto 0; padding: .4rem; }

    .ritual-closing { display: block; margin-top: 2.4rem; }

    .tonsure-photo { width: 72%; margin-inline: auto; }

    .ritual-after-pair { width: 100%; margin-top: var(--image-gap); }

    .comfort-photo { width: 100%; }

    .comfort-photo .story-caption { padding-inline: var(--page-gutter); }

    .after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--image-gap); }

    .after-grid > .story-figure:first-child { grid-column: 1 / -1; }

    .after-grid > .story-figure:first-child .story-caption { padding-inline: var(--page-gutter); }

    .after-shift { grid-column: 1 / -1; width: 100%; margin: 0 0 1.4rem; }

    .priest-photo, .communion-photo { grid-column: auto; margin-top: 0; }

    .priest-photo { margin-left: var(--page-gutter); }

    .communion-photo { margin-right: var(--page-gutter); }

    .family-section .section-head { padding-inline: var(--page-gutter); }

    .family-section > .shell.section-head { width: 100%; }

    .family-grid { grid-template-columns: 1fr; }

    .reception-grid { gap: var(--image-gap); }

    .reception-wide .story-caption { padding-inline: var(--page-gutter); }

    .reception-pair { grid-template-columns: 1fr; gap: var(--image-gap); width: 100%; }

    .reception-guests { margin-top: 0; }

    .reception-closing { width: 100%; margin: 2.4rem 0 0; }
}