/* Homepage layout for The Campaign world. Approved comp: .impeccable/mocks/home-c-fieldfirst.png */

/* ---------- First viewport: the green field, then the photograph ----------
   Phone and small-tablet sizes are calibrated to the approved comp at 512px wide and scale with the width;
   floors keep small phones legible and every control at 44px. */
.hero-field .site-header { padding-block: 0; }
.hero-copy { padding: 0 var(--gutter) clamp(16px, 3.3vw, 38px); }
.hero-title {
    max-width: 7.6em;
    font-size: clamp(40px, 10.6vw, 96px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
/* Hebrew letters carry no ascenders or descenders, so the same size reads smaller: lift it. */
[dir="rtl"] .hero-title { letter-spacing: -0.01em; line-height: 1.05; font-size: clamp(44px, 11.8vw, 104px); }
.hero-title::after { content: '.'; }
.hero-sub {
    margin-top: clamp(8px, 2vw, 16px);
    font-size: clamp(15px, 3.7vw, 24px);
    line-height: 1.35;
    color: var(--green-ink);
}
.hero-cred { margin-top: clamp(12px, 2.7vw, 22px); color: var(--green-ink); font-size: 11px; }
/* The credential is English in both languages: keep its order left to right, aligned to the page's start. */
.hero-cred { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .hero-cred { text-align: right; letter-spacing: 0.3em; font-size: 11px; }
@media (max-width: 420px) { .hero-cred, [dir="rtl"] .hero-cred, .price-label { letter-spacing: 0.18em; } }
.hero-actions { margin-top: clamp(12px, 2.7vw, 26px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 5.8vw, 30px); }
.hero-actions .btn { position: relative; min-height: 36px; padding: 0 clamp(14px, 2.8vw, 24px); font-size: clamp(14px, 2.75vw, 16px); }
/* The visible key is slim like the comp; the tappable area stays 44px tall. */
.hero-actions .btn::before { content: ''; position: absolute; inset: -4px 0; }
.hero-actions .text-link { position: relative; font-size: 12.5px; letter-spacing: 0.05em; text-underline-offset: 3px; }
.hero-actions .text-link::before { content: ''; position: absolute; inset: -13px -6px; }

.hero-photo { display: block; position: relative; overflow: hidden; aspect-ratio: 2.2 / 1; background: var(--ink); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* ---------- The offer: what it costs ---------- */
.offer { padding: clamp(18px, 3.9vw, 56px) var(--gutter) clamp(22px, 5.4vw, 56px); }
.prices { display: grid; grid-template-columns: 1fr 1fr; }
.price { display: flex; flex-direction: column; padding-inline-start: clamp(10px, 6.6vw, 40px); }
.price + .price { border-inline-start: 1px solid var(--rule-ivory); padding-inline-start: clamp(16px, 9.6vw, 56px); }
.price-label { color: var(--ink-2); font-size: 11px; }
.price-figure {
    display: block;
    margin-top: auto;
    padding-top: clamp(2px, 0.6vw, 12px);
    font-size: clamp(36px, 9.9vw, 76px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.offer-note { margin-top: 18px; padding-inline-start: clamp(10px, 6.6vw, 40px); color: var(--ink-2); font-size: 14px; }
.offer-actions { margin-top: 20px; }

/* ---------- The journal ---------- */
.journal { padding: 0 var(--gutter) 56px; }
.journal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.journal-title { color: var(--green); font-size: 11px; }
.journal-head .text-link { font-size: 13.5px; }
.journal-list { list-style: none; margin: clamp(10px, 2.7vw, 22px) 0 0; padding: 0; display: grid; gap: 24px; }
.journal-item a { display: grid; grid-template-columns: clamp(110px, 24.2vw, 220px) minmax(0, 1fr); gap: clamp(16px, 4.5vw, 28px); align-items: start; text-decoration: none; }
.journal-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory-2); }
.journal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.journal-item a:hover .journal-thumb img { transform: scale(1.04); }
.journal-name { max-width: 21ch; font-size: clamp(17px, 4vw, 22px); font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; }
.journal-item a:hover .journal-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.journal-tag { display: block; margin-top: 6px; unicode-bidi: plaintext; color: var(--ink-2); font-size: 11px; }

/* ---------- Motion: one entrance, on the first viewport only ---------- */
/* Text is visible from the first frame; only its position settles, so a paused timeline never hides it. */
@keyframes rise { from { transform: translateY(0.4em); } to { transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.hero-copy > * { animation: rise 760ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hero-copy > :nth-child(3) { animation-delay: 140ms; }
.hero-copy > :nth-child(4) { animation-delay: 210ms; }
.hero-photo img { animation: settle 1600ms var(--ease-out) both; }

/* ---------- Desktop: the field and the photograph side by side ---------- */
@media (min-width: 1024px) {
    .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 100svh; }
    .hero-field { display: flex; flex-direction: column; }
    .hero-copy { margin-block: auto; padding-block: 48px 72px; }
    .hero-title { font-size: clamp(64px, 6.6vw, 96px); }
    .hero-sub { max-width: 26ch; }
    .hero-photo { aspect-ratio: auto; min-height: 100%; }
    .hero-photo img { position: absolute; inset: 0; object-position: 62% 50%; }
    /* The header shares the green column with the headline: tighter tracking keeps the full nav and the globe inside it. */
    .hero-field .site-nav { gap: clamp(16px, 1.6vw, 28px); }
    html:not([dir="rtl"]) .hero-field .site-nav .caps { letter-spacing: 0.2em; }

    .offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 64px; align-items: center; padding-block: 80px; max-width: 1280px; margin-inline: auto; }
    .offer-note { grid-column: 1; grid-row: 1; margin: 0; padding: 0; font-size: 17px; max-width: 32ch; }
    .prices { grid-column: 2; grid-row: 1; }
    [dir="rtl"] .hero-title { font-size: clamp(72px, 7.6vw, 104px); }

    .journal { max-width: 1280px; margin-inline: auto; }
    .journal { padding-bottom: 72px; }
    .journal-list { grid-template-columns: 1fr 1fr; gap: 40px; }

}
/* Small laptops: the green column is too narrow for the full nav; keep the phone nav (Blog and language). */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero-field .site-nav .nav-wide { display: none; }
}