/*
 * Round 7 (29 Oct 2026), the lawn calendar page: which Fertilize-it product for which season. Loaded after design.css (Layout::roundStyles).
 * Markup: Front/Blocks/LawnCalendar.php. Script: js/round7-calendar.js. Every class starts with yr- so nothing here can touch another page.
 *   1 the heading                                   2 the strip: four season photographs that fade into each other, the months as its scale, today
 *   3 the four season cards (a row of four from 1360 px; two by two up to there; the shared swipe row on a phone) with their products
 *   4 the continuous programme, the next steps      5 narrower screens
 * Plain rules (they beat the layered older ones). Nothing is a pill or a bordered box: photographs, hairlines, one colour per season.
 * Motion is transform and opacity only: today's line slides in once; reduced motion gets the end state at once.
 */

/* ============ 0. tokens ============ */
.yr-section {
  --yr-ink: var(--ink-2, #232c26);
  --yr-mute: #55605a;                       /* 5.6:1 on the page */
  --yr-hair: rgba(75, 52, 37, .2);          /* the peat of the soil page, as a hairline */
  --yr-hair-soft: rgba(75, 52, 37, .1);
  --yr-top: 34px;                           /* room above the strip: today's label sits there */
  --yr-strip-h: 200px;
  --yr-ov: clamp(28px, 4.4vw, 64px);        /* how far a photograph reaches under its neighbour */
  overflow-x: clip;                         /* the swipe row bleeds to the screen edges; the page itself never scrolls sideways */
}

/* ============ 1. the heading ============ */
/* the page head has no picture beside it (the strip below is the picture): its title may use the whole width and sits close to the strip */
.shop-head:has(+ .yr-section) .shop-head-grid { grid-template-columns: minmax(0, 1fr); }
.shop-head:has(+ .yr-section) .shop-head-grid p { max-width: 640px; }
@media (min-width: 900px) { .shop-head:has(+ .yr-section) { padding-bottom: 0; } }
.yr-section { padding-block: clamp(30px, 3.6vw, 48px) clamp(8px, 2vw, 24px); }
.yr-head { margin-bottom: clamp(8px, 1.6vw, 18px); }
.yr-head h2 { margin: 0; font: 600 clamp(24px, 2.5vw, 31px)/1.15 var(--font-display), sans-serif; letter-spacing: -.022em; color: var(--green-ink); text-wrap: balance; }

/* ============ 2. the strip ============ */
.yr { position: relative; }
.yr-board { position: relative; padding-top: var(--yr-top); margin-bottom: clamp(26px, 3vw, 40px); }
.yr-strip {
  position: relative; isolation: isolate; height: var(--yr-strip-h); overflow: hidden; border-radius: 26px; background: #1d2a21;
  box-shadow: 0 34px 50px -38px rgba(30, 40, 28, .75);
}
.yr-photos { position: absolute; inset: 0; z-index: -1; }
/* a photograph starts a little before its first month and fades in over the one before it; the last one reaches the edge of the strip */
.yr-ph { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 12 * 100% - var(--yr-ov)); width: calc(var(--n) / 12 * 100% + var(--yr-ov) * 2); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--yr-ov) * 2)); mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--yr-ov) * 2)); }
.yr-ph.is-first { left: 0; width: calc(var(--n) / 12 * 100% + var(--yr-ov)); -webkit-mask-image: none; mask-image: none; }
.yr-ph.is-last { width: calc(var(--n) / 12 * 100% + var(--yr-ov)); }
.yr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yr-ph.s-spring img { object-position: 50% 38%; }
.yr-ph.s-summer img { object-position: 50% 52%; }
.yr-ph.s-autumn img { object-position: 42% 55%; }
.yr-ph.s-winter img { object-position: 50% 60%; }
.yr-ph img.is-mirror { transform: scaleX(-1); }
/* the strip is darkened at the top and the bottom so that the white names and months have contrast on any part of any picture */
.yr-strip::before, .yr-strip::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.yr-strip::before { top: 0; height: 62%; background: linear-gradient(180deg, rgba(12, 18, 13, 0.62) 0, rgba(12, 18, 13, 0.61) 8.33%, rgba(12, 18, 13, 0.57) 16.67%, rgba(12, 18, 13, 0.52) 25%, rgba(12, 18, 13, 0.46) 33.33%, rgba(12, 18, 13, 0.39) 41.67%, rgba(12, 18, 13, 0.31) 50%, rgba(12, 18, 13, 0.23) 58.33%, rgba(12, 18, 13, 0.16) 66.67%, rgba(12, 18, 13, 0.1) 75%, rgba(12, 18, 13, 0.05) 83.33%, rgba(12, 18, 13, 0.01) 91.67%, rgba(12, 18, 13, 0) 100%); }
.yr-strip::after { bottom: 0; height: 56%; background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px calc(100% / 12)) bottom / 100% 9px no-repeat,
  linear-gradient(0deg, rgba(12, 18, 13, 0.7) 0, rgba(12, 18, 13, 0.69) 8.33%, rgba(12, 18, 13, 0.65) 16.67%, rgba(12, 18, 13, 0.59) 25%, rgba(12, 18, 13, 0.52) 33.33%, rgba(12, 18, 13, 0.44) 41.67%, rgba(12, 18, 13, 0.35) 50%, rgba(12, 18, 13, 0.26) 58.33%, rgba(12, 18, 13, 0.18) 66.67%, rgba(12, 18, 13, 0.11) 75%, rgba(12, 18, 13, 0.05) 83.33%, rgba(12, 18, 13, 0.01) 91.67%, rgba(12, 18, 13, 0) 100%); }
.yr-seasons { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.yr-seasons li { position: absolute; top: 22px; left: calc(var(--a) / 12 * 100%); width: calc(var(--n) / 12 * 100%); display: grid; gap: 3px; padding-left: 22px; padding-right: 6px; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.yr-s-ico svg { display: block; width: 24px; height: 24px; stroke-width: 1.35; }
/* a soft dark pad behind each label: the photographs differ a lot (white daisies, pale frost, a bright haze), and white type needs 4.5:1 on all of them */
.yr-seasons li::before { content: ""; position: absolute; z-index: -1; inset: -2px -8px -4px -10px; pointer-events: none; border-radius: 18px; background: rgba(10, 16, 12, .52); filter: blur(13px); }
.yr-s-name { font: 700 19px/1.15 var(--font-display), sans-serif; letter-spacing: -.01em; }
.yr-s-ico, .yr-s-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the months, the scale of the strip */
.yr-months { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 54px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.yr-months li { display: grid; place-items: center; min-width: 0; padding-top: 12px; color: #fff; font: 600 14px/1 var(--font-sans), sans-serif; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.yr-months li.is-now { font-weight: 800; }
.yr-m-i { display: none; }

/* today: a thin line through the strip with its name above it; it slides in once */
.yr-over { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.yr-now { position: absolute; inset: 0; }
.yr-now::before { content: ""; position: absolute; left: calc(var(--x) * 100% - 1px); top: calc(var(--yr-top) - 14px); bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--peat) 0, var(--peat) 14px, #fff 14px, #fff 100%); }
.yr-now b { position: absolute; left: calc(var(--x) * 100%); top: 0; transform: translateX(-50%); font: 600 13px/18px var(--font-sans), sans-serif; color: var(--yr-ink); white-space: nowrap; }
.yr[data-edge="start"] .yr-now b { transform: translateX(-8px); }
.yr[data-edge="end"] .yr-now b { transform: translateX(calc(-100% + 8px)); }
@keyframes yr-slide { from { transform: translateX(calc(var(--x) * -100%)); opacity: 0; } 20% { opacity: 1; } }
.yr.is-js:not(.is-seen) .yr-now { opacity: 0; }
.yr.is-seen .yr-now { animation: yr-slide 1.3s var(--ease-soft) .2s backwards; }

/* ============ 3. the four season cards ============ */
/* A card is a season: its photograph fades into the colour of the season (the look of the home page's season panel), the client's one sentence about
   the season, and the products for it with their own timing line and price. */
.yr-cards { margin: 0; padding: 0; }
@media (min-width: 721px) { .yr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1360px) { .yr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); } }   /* four cards need about 300 px each for a name and its price on one line */
.yr-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 28px; color: #fff;
  background: var(--grain), linear-gradient(180deg, var(--sf-1, #2d5740) 0%, var(--sf-2, #1a3225) 100%);
  box-shadow: 0 14px 26px -20px color-mix(in srgb, var(--sf-2, #1a3225) 55%, transparent);   /* short and soft (it was 30 px down, 50 px blur: a dark smudge that the swipe row cut off) */
}
.yr-card-photo { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 270px; margin: 0; }
.yr-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 42%, rgba(0, 0, 0, 0.98) 46.83%, rgba(0, 0, 0, 0.93) 51.67%, rgba(0, 0, 0, 0.84) 56.5%, rgba(0, 0, 0, 0.74) 61.33%, rgba(0, 0, 0, 0.62) 66.17%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.38) 75.83%, rgba(0, 0, 0, 0.26) 80.67%, rgba(0, 0, 0, 0.16) 85.5%, rgba(0, 0, 0, 0.07) 90.33%, rgba(0, 0, 0, 0.02) 95.17%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 42%, rgba(0, 0, 0, 0.98) 46.83%, rgba(0, 0, 0, 0.93) 51.67%, rgba(0, 0, 0, 0.84) 56.5%, rgba(0, 0, 0, 0.74) 61.33%, rgba(0, 0, 0, 0.62) 66.17%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.38) 75.83%, rgba(0, 0, 0, 0.26) 80.67%, rgba(0, 0, 0, 0.16) 85.5%, rgba(0, 0, 0, 0.07) 90.33%, rgba(0, 0, 0, 0.02) 95.17%, transparent 100%); }
.yr-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, transparent 0%, color-mix(in srgb, var(--sf-2, #1a3225) 58%, transparent) 30%, color-mix(in srgb, var(--sf-2, #1a3225) 30%, transparent) 58%, transparent 84%); }
.yr-card-head { padding: 176px 24px 0; text-shadow: 0 1px 18px rgba(0, 0, 0, .4); }
.yr-card-now { position: absolute; top: 22px; left: 24px; margin: 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.yr-card h3 { margin: 0; font: 600 31px/1.05 var(--font-display), sans-serif; letter-spacing: -.02em; color: #fff; }
.yr-card-months { margin: 6px 0 0; font-size: 14.5px; line-height: 1.3; font-weight: 600; color: var(--sa-hi, #fff); }
.yr-goal { min-height: 3.1em; margin: 20px 24px 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .94); text-wrap: pretty; }   /* two lines high in every card, so that the products of a row start at the same height */
.yr-prods { margin: 22px 24px 14px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .2); }
.yr-prods li + li { border-top: 1px solid rgba(255, 255, 255, .2); }
.yr-prod { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; align-items: center; min-height: 44px; padding: 14px 0; text-decoration: none; }
.yr-card .yr-prod { color: #fff; }
.yr-pic { position: relative; display: block; width: 56px; height: 72px; }
.yr-pic img { display: block; width: 100%; height: 100%; }
/* a bag is the cut-out it is, standing with a soft shadow; a bottle (a photograph on grass, not cut out) is a small rounded photograph */
.yr-pic.is-cutout img { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.yr-pic.is-photo { overflow: hidden; border-radius: 12px; box-shadow: 0 10px 16px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); }
.yr-pic.is-photo img { object-fit: cover; object-position: 50% 38%; }
.yr-prod-info { display: grid; gap: 3px; min-width: 0; }
.yr-prod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.yr-prod-name { min-width: 0; font: 600 17px/1.25 var(--font-display), sans-serif; letter-spacing: -.005em; overflow-wrap: break-word; }
.yr-price { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yr-when { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.yr-card .pg-sz-ai { margin: 0 24px 6px; color: rgba(255, 255, 255, .86) !important; }
@media (hover: hover) and (pointer: fine) {
  .yr-pic img { transition: transform .5s var(--ease-soft); }
  .yr-prod:hover .yr-pic img { transform: translateY(-3px); }
  .yr-prod:hover .yr-prod-name { text-decoration: underline; text-underline-offset: 3px; }
}
.yr-card :focus-visible { outline-color: var(--focus-on-dark, #e9cf86); }

/* a link with an arrow (the old .text-link is a white pill; this page has none) */
.yr-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--green-ink); text-decoration: none; }
.yr-more svg { flex: none; width: 18px; height: 18px; stroke-width: 1.7; transition: transform .25s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .yr-more:hover { text-decoration: underline; text-underline-offset: 4px; } .yr-more:hover svg { transform: translateX(3px); } }
.yr-card > .yr-more { margin: auto 24px 20px; color: #fff; }

/* ============ 4. the continuous programme, the next steps ============ */
.yr-always { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.1fr); align-items: center; gap: 6px clamp(28px, 4vw, 64px); margin-top: clamp(44px, 5vw, 68px); }   /* no rule above it any more: the space separates the block from the cards */
.yr-always h3 { margin: 0; font: 600 20px/1.25 var(--font-display), sans-serif; color: var(--green-ink); }
.yr-always .yr-prod { max-width: 520px; padding: 6px 0; color: var(--green-ink); }
.yr-always .yr-prod-top { justify-content: flex-start; gap: 18px; }
.yr-always .yr-pic.is-cutout img { filter: drop-shadow(0 8px 7px rgba(43, 30, 21, .32)) drop-shadow(0 2px 2px rgba(43, 30, 21, .2)); }
.yr-always .yr-when { color: var(--yr-mute); }
.yr-nexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.yr-next { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; padding: 0 clamp(0px, 3vw, 44px) 8px 0; }
.yr-next + .yr-next { padding-left: clamp(0px, 3vw, 44px); }
.yr-next > svg { width: 38px; height: 38px; stroke-width: 1.1; color: var(--moss); }
.yr-next h3 { margin: 0 0 6px; font: 600 19px/1.25 var(--font-display), sans-serif; color: var(--green-ink); }
.yr-next p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.yr-next .yr-more { margin-top: -6px; }

/* ============ 5. narrower screens ============ */
/* Below 1360 px four cards are too narrow: two by two (set with the grid above). On a phone (720 px and less) the cards are the shared swipe row of round7-mobile.css and carousel.js
   (the container has data-snap): one card and a peek of the next, snap card by card, a thin track with a thumb under it, arrow keys; that CSS comes
   after this file and needs nothing from it. */
@media (max-width: 1199px) {
  .yr-always { grid-template-columns: minmax(0, 1fr); }
  .yr-seasons li { padding-left: 18px; }
}
@media (max-width: 899px) {
  .yr-section { --yr-strip-h: 128px; --yr-top: 28px; }
  .yr-strip { border-radius: 22px; }
  .yr-seasons li { top: 14px; padding-left: 10px; padding-right: 2px; gap: 2px; }
  .yr-s-ico svg { width: 20px; height: 20px; }
  .yr-s-name { font-size: 13.5px; }
  .yr-months li { font-size: 12.5px; }
  .yr-now b { font-size: 12.5px; }
  .yr-nexts { grid-template-columns: minmax(0, 1fr); }
  .yr-next, .yr-next + .yr-next { padding: 0 0 6px; }
  .yr-next + .yr-next { margin-top: 36px; }
}
@media (max-width: 600px) {
  .yr-m-name { display: none; }                         /* twelve names do not fit 27 px each: the initials do, in every language */
  .yr-m-i { display: block; }
}
/* ============ 6. round 8 (29 Oct 2026): what the client's calendar lists and the page did not ============
   The liquid elixirs inside each season card (quiet text rows: name, and how often where his sheet says so), the winter note, and "good to know" under the cards
   (how often Basic and Pro, how to apply). No rules between the rows (the owner dislikes lines): space and type do the grouping. */
.yr-elx { margin: 2px 24px 16px; }
.yr-elx h4 { margin: 0 0 4px; font: 600 15px/1.3 var(--font-display), sans-serif; color: rgba(255, 255, 255, .86); }
.yr-elx ul { margin: 0; padding: 0; list-style: none; }
.yr-elx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 34px; padding: 5px 0; color: #fff; text-decoration: none; }
.yr-elx-name { min-width: 0; font: 600 15.5px/1.3 var(--font-display), sans-serif; letter-spacing: -.005em; }
.yr-elx-when { flex: none; font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, .8); text-align: right; }
@media (pointer: coarse) { .yr-elx-row { align-items: center; min-height: 44px; } }
@media (hover: hover) and (pointer: fine) { .yr-elx-row:hover .yr-elx-name { text-decoration: underline; text-underline-offset: 3px; } }
.yr-note { margin: 2px 24px 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); text-wrap: pretty; }

.yr-know { margin-top: clamp(44px, 5vw, 68px); }
.yr-know h3 { margin: 0 0 clamp(20px, 2.6vw, 30px); font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.yr-know-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px) clamp(28px, 3.6vw, 56px); margin: 0; padding: 0; list-style: none; }
.yr-know-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; }
.yr-know-item > svg { width: 34px; height: 34px; --hi-w: 1.1; color: var(--moss); }
.yr-know-item h4 { margin: 0 0 5px; font: 600 17.5px/1.3 var(--font-display), sans-serif; color: var(--green-ink); }
.yr-know-item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.yr-care { margin-top: clamp(34px, 4vw, 52px); }
.yr-sow { display: block; margin: 0 0 10px; }
.yr-sow a { display: block; font-weight: 600; color: var(--green-ink); text-underline-offset: 3px; }
.yr-sow-when { display: block; }
@media (pointer: coarse) { .yr-sow a { display: flex; align-items: center; min-height: 44px; } }   /* a link is 44 px high on a touch screen */
@media (max-width: 1023px) { .yr-know-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .yr-know-list[data-snap] { --snap-w: 78%; --snap-pt: 4px; } }

@media (prefers-reduced-motion: reduce) {
  .yr-more svg, .yr-pic img { transition: none !important; }
  .yr.is-seen .yr-now { animation: none !important; }
  .yr.is-js:not(.is-seen) .yr-now { opacity: 1; }
}