/**
 * The tour page's hero, and the section-heading rhythm.
 *
 * Its own file rather than an edit to tour-itinerary.css, which is 31KB of
 * supplied design this plugin can only replace whole — appending a component
 * there would mean transcribing 800 unrelated lines and risking a slip in them.
 *
 * PRINTS LAST, AND HAS TO. Everything here overrides the design or
 * tour-responsive.css, often at equal specificity, so it only wins by coming
 * afterwards. CT_Template::assets() enqueues it with ct-tour-responsive as a
 * dependency, which guarantees the order.
 *
 * WHAT IS DELIBERATELY NOT HERE
 * -----------------------------
 * The gallery and the booking widget were briefly wrapped in a visible card —
 * border, white ground, shadow — and it was taken off again on request. The
 * grouping stays, because .hero-grid is what puts them side by side, but it is
 * invisible.
 *
 * That decision also puts the widget's own card back. It had to lose its border,
 * background and shadow while there was an outer card, or the page showed a card
 * inside a card: two borders, two shadows and 22px of padding twice, 24px apart.
 * With the outer one gone those overrides would have left the widget flat and the
 * whole hero with no edges at all, so they went with it — the design's rule
 * applies again untouched, which is why there is nothing about .widget below.
 *
 * There is also no `display: none` on .section-head p. It was here briefly and
 * was taken out again: that selector reaches the standfirst as well as the blurb
 * under a heading, so it hid the tour's own description along with them.
 *
 * @package CustomTours
 */

/* ==========================================================================
   The title
   ========================================================================== */

/*
 * NOTHING HERE NOW, AND THE ABSENCE IS THE POINT.
 *
 * The tour's name spent a while out here in a .wrap of its own above the panel,
 * where this file gave it an 18px gap to the grid below and restated an order it
 * no longer needed. It is back inside .gallery: that column is sticky, and the
 * title has to stay with the photographs rather than scroll away above them.
 *
 * Its spacing is now the gallery's own 12px flex gap and its order comes from
 * tour-quote.css, which never stopped carrying the rule. The .hero-head rules
 * matched nothing once the markup moved, so they are gone rather than kept as a
 * comment describing a layout the page does not have.
 */

/*
 * THE BOOKING CARD STARTS WHERE THE PHOTOGRAPH DOES, NOT WHERE THE TITLE DOES.
 *
 * Because the title is the first thing in the left column, both columns of
 * .hero-grid begin on the same line and the card's top edge lands level with the
 * tour's name — while the picture beside it starts a title lower. Asked for the
 * other way round: the name on top, and then two blocks starting together.
 *
 * The number is the title's own height plus the gallery's flex gap: the h1 is
 * 30px at line-height 1.25, which is 37.5px, and .gallery gaps at 12px. It is
 * written as that sum rather than as a rounded 50 so that changing either value
 * in tour-quote.css or tour-itinerary.css shows up here as an arithmetic error
 * rather than as a card that quietly drifts.
 *
 * A TITLE THAT WRAPS TO TWO LINES puts the card a line high again. No stylesheet
 * can measure one grid column from another, and the alternative — lifting the
 * title out of .gallery into a row of its own — would unstick it from the
 * photographs, which is the whole point of the note above.
 *
 * ONLY WHERE THERE ARE TWO COLUMNS TO LINE UP. Below 900px .hero-grid collapses
 * to one column and the card simply follows the gallery down the page; a top
 * margin there is a gap with nothing on the other side of it to explain it. 901
 * is .hero-grid's own breakpoint read the other way round, not a number chosen
 * here.
 */
@media (min-width: 901px) {

	.ct-itin .hero-grid > .widget {
		margin-top: calc( ( 30px * 1.25 ) + 12px );
	}
}

/* ==========================================================================
   Section headings
   ========================================================================== */

/* More room under a heading than the design's 28px. */
.ct-itin .section-head {
	margin-bottom: 52px;
}

/* ==========================================================================
   The standfirst
   ==========================================================================
 * ONE SENTENCE WAS SITTING IN 188 PIXELS, and 52px makes that worse rather than
 * better — so these two rules matter more now, not less.
 *
 * It renders as a <section>, so it took `padding: var(--gap) 0` — 40px each side
 * — and the .section-head inside it adds the margin above underneath. Stacked
 * against the hero's own bottom padding and the next section's top padding, that
 * measured 80px above the sentence and 132px below it, on a page where every
 * other gap between blocks is 80px.
 *
 * Taking its own padding and that margin away leaves exactly that rhythm: the
 * hero's bottom padding is the space above, the next section's top padding is the
 * space below, 40px each. It reads as the end of the hero rather than as a
 * section containing one line, which is what it is.
 */

.ct-itin .tour-lead {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * The margin above exists to separate a heading from the grid under it. There is
 * no heading and no grid here — only the paragraph.
 */
.ct-itin .tour-lead .section-head {
	margin-bottom: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 560px) {

	/* 52px under every heading is a lot of thumb-scrolling on a phone. */
	.ct-itin .section-head {
		margin-bottom: 32px;
	}

	/* Still nothing under the standfirst, whatever the breakpoint says. */
	.ct-itin .tour-lead .section-head {
		margin-bottom: 0;
	}
}