/* ==========================================================================
   Puifín — site-wide design system
   --------------------------------------------------------------------------
   Loaded on every page. Everything is namespaced .pf-* so it cannot collide
   with Ireca, Elementor or WooCommerce, with two deliberate exceptions marked
   below where the theme's own header and WooCommerce output are restyled.

   This file holds the shared language: tokens, header, hero, sections, cards,
   buttons. Page-specific sheets (ryder-cup.css, enquiry.css) build on it and
   should not redefine any of it.
   ========================================================================== */

:root {
    --pf-ink:     #15202b;   /* body text, dark surfaces */
    --pf-ink-2:   #0f1b24;   /* header band, deepest tint */
    --pf-muted:   #5c6b7a;
    --pf-line:    #e3e8ed;
    --pf-line-2:  #d8dee5;
    --pf-accent:  #ff3300;   /* brand orange */
    --pf-accent-soft: #ffb3a0;
    --pf-bg:      #f7f9fb;

    /* Inset for text inside a full-bleed card, where the image runs to the
       edge and the words must not. */
    --pf-card-pad: 1.5rem;
    --pf-measure: 1100px;    /* content column */
    --pf-gutter:  16px;
}

/* ==========================================================================
   1. Header — site-wide
   --------------------------------------------------------------------------
   Ireca's nav links are white because the theme expects a dark banner behind
   them. Puifín's pages do not all have one, so on a light page the menu is
   invisible until the sticky header gains a background on scroll.

   Rather than darkening the link text per page (which is what the old
   mu-plugin did for three hard-coded page IDs, leaving every other page
   broken) the band itself is dark everywhere. One header, one behaviour.
   ========================================================================== */
.ovatheme_header_version3 {
    background: var(--pf-ink-2);
}
/* Deep enough to beat the Customizer's own
   `.ovatheme_header_version3 .ova_menu { background-color:#343434 }`, which is
   printed in an inline <style> after this file. Without this the bar is the
   theme's warm grey rather than the brand ink, most visibly on mobile. */
.ovatheme_header_version3.header_m .ova_menu,
.ovatheme_header_version3.header_m nav.navbar ul.navbar-nav,
.ovatheme_header_version3.header_m .ova_menu nav.navbar,
.ovatheme_header_version3.header_m .ova_menu nav.navbar ul.navbar-nav {
    background-color: transparent !important;
}
/* Below 992px the Customizer repeats #343434 on the burger panel too. */
.ovatheme_header_version3.header_m nav.navbar li.dropdown ul.dropdown-menu {
    background-color: var(--pf-ink) !important;
}
/* The sticky clone needs the same treatment or it flashes light on scroll. */
.active_fixed.active_fixed {
    background: var(--pf-ink-2);
}
/* The theme paints a translucent overlay for its own banner; with a solid
   band behind the nav it only muddies the colour. */
.ovatheme_header_version3 .bg_overlay_header {
    opacity: 0 !important;
}

.ovatheme_header_version3 .ova_menu .navbar-nav > li > a {
    color: #fff;
    font-weight: 500;
    letter-spacing: .01em;
    /* "Ryder Cup 2027" wrapped to three lines and dragged the bar open. */
    white-space: nowrap;
    transition: color .15s ease;
}
/* Ireca renders two things for a submenu: a .caret inside the link, and a
   separate <button class="dropdown-toggle"> after it for touch. On desktop
   the button was showing as a stray arrow on its own line under the word. */
/* Selectors here are deliberately as deep as the theme's own
   (.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li > a, which
   also carries !important). Anything shallower loses. */
@media (min-width: 992px) {
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li {
        display: flex;
        align-items: center;
    }
}

/* The submenu arrow is an ElegantIcons glyph (content:"3") whose baseline sits
   well below the cap height, so it read as a stray mark under the word rather
   than a caret beside it. The theme also colours it #888, which is too dim
   against the dark bar. */
.ovatheme_header_version3 .ova_menu ul.navbar-nav .dropdown-toggle::after {
    vertical-align: middle;
    font-size: .75em;
    line-height: 1;
    color: inherit;
    opacity: .75;
}
/* ---- Submenu ------------------------------------------------------------
   The white link colour above is scoped to `> li > a`, so it only ever
   reached the top level. The items inside the Charters dropdown fell back to
   the theme's body colour, #343434, on a panel the theme paints #15202b:
   near-black on near-black, legible only once hover recoloured it.
   Matched as deep as the theme's own submenu rules, which carry !important. */
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu {
    padding: .4rem 0;
    background-color: var(--pf-ink) !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 2px;
    box-shadow: 0 12px 28px rgba(8, 16, 24, .28);
}
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li > a,
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li > a.nav-link {
    display: block;
    padding: .55rem 1.25rem;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 400;
    white-space: nowrap;
    background: none;
    transition: color .15s ease, background-color .15s ease;
}
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li > a:hover,
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li > a:focus-visible,
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li.active > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .07);
}
.ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav ul.dropdown-menu > li > a:focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: -2px;
}

.ovatheme_header_version3 .ova_menu .navbar-nav > li > a:hover,
.ovatheme_header_version3 .ova_menu .navbar-nav > li.current-menu-item > a {
    color: var(--pf-accent-soft);
}
/* Underline the page you are on, so the nav says where you are. */
.ovatheme_header_version3 .ova_menu .navbar-nav > li.current-menu-item > a {
    box-shadow: inset 0 -2px 0 var(--pf-accent);
}

/* The wordmark is black artwork. On the dark band it needs the white variant,
   which inc/puifin-branding.php substitutes; this is the sizing only. */
.ovatheme_header_version3 .logo .navbar-brand img {
    max-height: 52px;
    width: auto;
}
@media (max-width: 991.98px) {
    .ovatheme_header_version3 .logo .navbar-brand img { max-height: 40px; }
}

/* --------------------------------------------------------------------------
   Header furniture we do not want.
   Carried over from the puifin-hide-ui mu-plugin, which injected all of this
   as one unreadable line of inline CSS at wp_head and hard-coded the logo URL
   to the live domain.

   Search and the mini-cart both go: nothing is sold through the site, so a
   cart icon offers a checkout that leads nowhere.
   -------------------------------------------------------------------------- */
/* Three classes deep for a reason. Both elements carry Bootstrap's .d-lg-block
   (display:block !important), and the site's own Customizer CSS adds
   `.navbar .d-none { display: block !important }` — two classes, !important,
   and printed in an inline <style> after this file, so a two-class selector
   here loses the tie on source order. Worth deleting that Customizer rule at
   some point: it un-hides everything Bootstrap hides inside the navbar. */
.ovatheme_header_version3 .ova_menu .header3_search,
.ovatheme_header_version3 .ova_menu .ireca-cart-wrapper { display: none !important; }

/* Belt and braces for the abandoned Fluent Forms booking calendar. Its
   shortcode is now short-circuited in inc/puifin-enquiry.php so the markup no
   longer renders at all; this stays in case the shortcode is ever restored. */
#ff-booking-legend,
.ff-booking-section { display: none !important; }

/* Logo left, navigation right.
   The previous rule centred the nav by taking it out of flow and stretching
   it across the whole bar, which put the first menu item on top of the
   wordmark. Keeping both in the flex row cannot overlap however wide either
   one gets. */
@media (min-width: 992px) {
    .ovatheme_header_version3 .ova_menu nav.navbar {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
    .ovatheme_header_version3 .ova_menu .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
    }
    .ovatheme_header_version3 .ova_menu .navbar-collapse .navbar-nav {
        margin: 0 !important;
        align-items: center;
    }
    /* The theme sets mr-auto on the list, which would push the nav back left. */
    .ovatheme_header_version3 .ova_menu .navbar-nav.mr-auto { margin-right: 0 !important; }
}

/* The theme's banner, on pages that still use one rather than a .pf-hero. */
.header_img { min-height: 512px !important; }
@media (max-width: 991.98px) { .header_img { min-height: 412px !important; } }
@media (max-width: 767.98px) {
    .header_img { min-height: 279px !important; }
    .single-product .header_img { min-height: 346px !important; }
}

/* Gallery tiles crop to a fixed ratio on desktop; on a phone that cuts heads off. */
@media (max-width: 767px) {
    .pg-stage { aspect-ratio: auto !important; height: auto !important; }
}

/* ==========================================================================
   2. Page shell
   ========================================================================== */
.pf-page {
    max-width: var(--pf-measure);
    margin: 0 auto;
    padding: 0 var(--pf-gutter) 5rem;
    color: var(--pf-ink);
}
.pf-page h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.pf-page h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.pf-page p  { line-height: 1.65; }

.pf-eyebrow {
    margin: 0 0 .75rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.pf-aside { max-width: 60ch; color: var(--pf-muted); }
.pf-aside--lead { font-size: 1.1rem; color: var(--pf-ink); margin-bottom: 1.75rem; }

/* ==========================================================================
   3. Hero
   --------------------------------------------------------------------------
   Full-bleed: breaks out of the content column with the 100vw trick. Takes
   either a still (.pf-hero__img) or a silent looping clip (.pf-hero__video).
   The scrim is weighted at both ends — top so the white nav stays legible the
   moment the page paints, bottom so the headline has something to sit on.
   ========================================================================== */
.pf-hero {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    /* Modern browsers: the viewport minus the scrollbar, which is what we
       actually want. The 100vw above stays as the fallback. */
    width: 100dvw;
    margin-left: -50dvw;
    min-height: clamp(680px, 92vh, 980px);
    /* A single-cell grid with every layer in that cell.
       This replaced absolute positioning plus height:100%. The hero sets a
       min-height rather than a height, and something in the stack was
       resetting the image's height to auto, so on a phone the photograph
       stopped at its own aspect ratio and left the bottom half of the hero as
       flat navy. Stretching a grid item has no percentage to resolve and
       nothing to override: the image is the size of the cell because that is
       what a stretched item is. */
    display: grid;
    grid-template-areas: "stack";
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background: var(--pf-ink-2);   /* shown while the media loads */
}
.pf-hero--short { min-height: clamp(500px, 68vh, 760px); }

.pf-hero > * {
    grid-area: stack;
    min-width: 0;
}

/* The media sits in its own absolutely positioned box.
   Two things have to be true at once: the photograph must not size the hero
   (as a normal grid item it imposed its own 16:9 height, making the hero
   810px tall on a wide screen), and it must fill whatever height the hero
   ends up being. Putting `height: 100%` directly on the image satisfied
   neither: the hero's height comes from its own content, so there is no
   definite height for the percentage to resolve against, and the image fell
   back to its intrinsic 810px, overflowed, and was clipped to its top edge.
   That also silently disabled object-position, because an image whose box
   matches its own aspect ratio has nothing to crop.

   This wrapper takes its height from inset: 0 instead, which is definite.
   The image's percentage height then resolves against it, object-fit has
   something to crop, and object-position decides what we keep. */
.pf-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -2;
}
/* Two classes and an element, for a reason. WooCommerce's layout stylesheet
   ships `.woocommerce img, .woocommerce-page img { height: auto }`, which is
   a class plus an element and so outweighs a single class. It loads on every
   page of the site, so a plain `.pf-hero__img { height: 100% }` lost
   everywhere: the image fell back to its intrinsic 810px, overflowed the
   hero, was clipped to its top edge, and object-position quietly stopped
   doing anything because the box already matched the image's aspect ratio. */
.pf-hero .pf-hero__media img,
.pf-hero .pf-hero__media video {
    /* Stacked, not sequential. The still and the clip are two layers of the
       same picture: the still paints first and the clip fades in over it. In
       normal flow they sit one under the other, and since the wrapper clips,
       the clip ends up below the fold of its own container, playing where
       nobody can see it. */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;   /* per-context override is inline */
}
.pf-hero__scrim {
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(8,16,24,.72) 0%, rgba(8,16,24,.18) 26%, rgba(8,16,24,0) 46%),
        linear-gradient(to top,    rgba(8,16,24,.90) 0%, rgba(8,16,24,.60) 46%, rgba(8,16,24,0) 82%);
}
.pf-hero__inner {
    align-self: end;
    position: relative;
    width: 100%;
    max-width: var(--pf-measure);
    margin: 0 auto;
    /* Top padding so the eyebrow never sits directly under the nav bar on a
       short screen, where the hero is at its minimum height and the copy
       otherwise fills it corner to corner. */
    padding: clamp(2rem, 5vw, 3.5rem) var(--pf-gutter) clamp(2.5rem, 6vw, 4.5rem);
    color: #fff;
    text-shadow: 0 1px 3px rgba(8, 16, 24, .45);
}
.pf-hero__eyebrow {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pf-accent-soft);
}
.pf-hero__title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.3rem, 6.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}
/* The titles carry a hard <br> to control where they break on a wide screen.
   At phone width that break lands in the wrong place and leaves a line
   holding one or two words, so it is suppressed and the title wraps to the
   column instead. Balancing is for the same reason: it only helps when there
   is room to balance. */
.pf-hero__title br { display: none; }

@media (min-width: 768px) {
    .pf-hero__title { text-wrap: balance; }
    .pf-hero__title br { display: inline; }
}
.pf-hero--short .pf-hero__title { font-size: clamp(2rem, 5vw, 3rem); }

.pf-hero__lede {
    max-width: 48ch;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255,255,255,.88);
}
.pf-hero__actions { margin-top: 2rem; margin-bottom: 0; }

/* A still poster carries the first frame so there is no flash of empty blue
   before the clip decodes; it is removed from the layout once playing. */
.pf-hero__video { background: var(--pf-ink-2); }

/* Visitors who ask for less motion get the poster frame, never the loop. */
@media (prefers-reduced-motion: reduce) {
    .pf-hero__video { display: none; }
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.pf-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--pf-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pf-btn:hover,
.pf-btn:focus-visible { background: #1a1a1a; color: #fff; transform: translateY(-1px); }

/* On a photograph, inverting to white reads better than darkening. */
.pf-hero .pf-btn:hover,
.pf-hero .pf-btn:focus-visible,
.pf-section--tint .pf-btn:hover,
.pf-section--tint .pf-btn:focus-visible { background: #fff; color: var(--pf-ink); }

.pf-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.55);
}
.pf-btn--ghost:hover,
.pf-btn--ghost:focus-visible { background: #fff; color: var(--pf-ink); border-color: #fff; }

.pf-btn__note {
    display: block;
    margin-top: .8rem;
    font-size: .88rem;
    color: var(--pf-muted);
}
.pf-hero .pf-btn__note { color: rgba(255,255,255,.72); }

/* ==========================================================================
   5. Sections
   ========================================================================== */
.pf-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-bottom: 1px solid var(--pf-line);
}
.pf-section:last-of-type { border-bottom: 0; }

/* Full-bleed dark band. padding-inline keeps the content aligned to the
   column even though the background runs edge to edge. */
.pf-section--tint {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    padding-inline: max(var(--pf-gutter), calc((100vw - var(--pf-measure)) / 2));
    background: var(--pf-ink);
    color: #fff;
    border-bottom: 0;
}
.pf-section--tint h3,
.pf-section--tint .pf-aside--lead { color: #fff; }
.pf-section--tint .pf-aside,
.pf-section--tint .pf-grid p,
.pf-section--tint .pf-card p { color: rgba(255,255,255,.72); }
.pf-section--tint .pf-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.14);
    border-top-color: rgba(255,255,255,.14);
}
.pf-section--tint .pf-chips li {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
    color: #fff;
}

.pf-section--bleed-tint { background: var(--pf-bg); }

/* ==========================================================================
   6. Grids, cards, chips, rows
   ========================================================================== */
.pf-grid { display: grid; gap: 1rem; }
.pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-grid p { margin: 0; font-size: .95rem; color: var(--pf-muted); }

.pf-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--pf-line);
    border-top: 3px solid var(--pf-line);
    border-radius: 2px;
}
.pf-card--highlight { border-top-color: var(--pf-accent); }

/* A whole card that is one link — used for the charter grid and the archive.
   A column so the call to action can be pinned to the bottom: the titles run
   to one or two lines, and without that the five cards each ended their text
   at a different height. */
.pf-card--link {
    display: flex;
    flex-direction: column;
    padding: 0 0 1.4rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pf-card--link .pf-card__media { margin-bottom: 1.15rem; }
.pf-card--link .pf-card__title {
    margin: 0 var(--pf-card-pad) .55rem;
    font-size: 1.05rem;
    line-height: 1.35;
    text-wrap: balance;
}
.pf-card--link .pf-card__excerpt {
    margin: 0 var(--pf-card-pad) 1.4rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--pf-muted);
}
/* Not a button: the whole card is already the link. This is the affordance
   that says so, held at the foot of every card whatever the copy above does. */
.pf-card--link .pf-card__more {
    margin: auto var(--pf-card-pad) 0;
    padding-top: .25rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pf-accent);
}
.pf-card__more::after {
    content: "";
    display: inline-block;
    width: .42em;
    height: .42em;
    margin-left: .5em;
    vertical-align: .08em;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.pf-card--link:hover,
.pf-card--link:focus-visible {
    border-top-color: var(--pf-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21,32,43,.08);
}
.pf-card--link:hover .pf-card__title { color: var(--pf-accent); }
.pf-card--link:hover .pf-card__more::after { transform: rotate(45deg) translate(2px, -2px); }
.pf-card__media img {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    border-radius: 0;
}
.pf-card p { margin: 0; font-size: .92rem; color: var(--pf-muted); }
.pf-card__tidal {
    margin-top: .75rem !important;
    padding-left: .75rem;
    font-size: .82rem !important;
    color: var(--pf-ink) !important;
    border-left: 2px solid var(--pf-accent);
}
/* The reassuring case: no tidal window to work around. */
.pf-card__tidal--clear {
    color: var(--pf-muted) !important;
    border-left-color: var(--pf-line);
}

.pf-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }

.pf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.pf-chips li {
    padding: .5rem 1rem;
    background: var(--pf-bg);
    border: 1px solid var(--pf-line);
    border-radius: 100px;
    font-size: .92rem;
}

.pf-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 0;
}
.pf-rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--pf-line);
}
.pf-rows span {
    flex: none;
    color: var(--pf-muted);
    font-size: .9rem;
    text-align: right;
}
/* An odd number of entries leaves the last cell empty; without this the
   final row has a rule under one half and nothing under the other. */
.pf-rows li:last-child:nth-child(odd) { border-bottom: 0; }

/* One column by choice, for a .pf-rows inside a half-width column where the
   viewport is wide but the container is not. */
.pf-rows--single { grid-template-columns: 1fr; }

@media (max-width: 700px) {
    .pf-rows { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Media
   ========================================================================== */
.pf-figure { margin: 0; }
.pf-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}
.pf-figure figcaption {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--pf-muted);
}

/* Editorial image band: a tall frame and two short ones. */
.pf-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    aspect-ratio: 16 / 8;
}
.pf-mosaic > :first-child { grid-row: span 2; }

/* Gallery: a plain responsive grid. The first image spans the full width
   because it is the one worth seeing large. */
.pf-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.pf-gallery__item:first-child { grid-column: 1 / -1; }
.pf-gallery__item:first-child img { aspect-ratio: 21 / 9; }
.pf-gallery__item img { aspect-ratio: 3 / 2; }
.pf-gallery__item a { display: block; }

/* A video the visitor chooses to play, as opposed to a silent hero loop. */
.pf-video {
    display: block;
    width: 100%;
    border-radius: 2px;
    background: #000;
    aspect-ratio: 16 / 9;
}

.pf-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.pf-split--reverse > :first-child { order: 2; }
.pf-split .pf-figure img { aspect-ratio: 4 / 3; }

/* ==========================================================================
   8. Closing block
   ========================================================================== */
.pf-closing { padding: clamp(3rem, 6vw, 4.5rem) 0 0; text-align: center; }
.pf-closing p { max-width: 52ch; margin-inline: auto; color: var(--pf-muted); }
.pf-closing .pf-contact { margin-top: 1.25rem; font-size: .95rem; }
.pf-closing .pf-contact a { color: var(--pf-accent); }

/* ==========================================================================
   9. WooCommerce — charter pages
   --------------------------------------------------------------------------
   Charters are quoted, not sold, so the shop is a catalogue. Prices and carts
   are removed in inc/puifin-enquiry.php; this brings what remains into line
   with the rest of the site.
   ========================================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--pf-ink);
}
.woocommerce ul.products li.product .price { display: none; }

.woocommerce div.product .product_title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--pf-muted); }

/* The enquiry CTA that replaces add-to-cart. */
.pf-cta { margin: 1.5rem 0; }
.pf-cta__button {
    display: inline-block;
    padding: .9rem 1.75rem;
    background: var(--pf-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    border-radius: 2px;
    transition: background .15s ease, transform .15s ease;
}
.pf-cta__button:hover,
.pf-cta__button:focus-visible { background: #1a1a1a; color: #fff; transform: translateY(-1px); }
.pf-cta__note { display: block; margin-top: .6rem; color: var(--pf-muted); font-size: .9rem; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .pf-grid--3,
    .pf-grid--4 { grid-template-columns: 1fr 1fr; }
    .pf-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        aspect-ratio: auto;
    }
    .pf-mosaic > :first-child { grid-row: auto; grid-column: span 2; }
    .pf-mosaic .pf-figure img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
    .pf-grid--2,
    .pf-grid--3,
    .pf-grid--4,
    .pf-rows { grid-template-columns: 1fr; }
    .pf-split { grid-template-columns: 1fr; }
    .pf-split--reverse > :first-child { order: 0; }
    .pf-rows li { flex-direction: column; gap: .15rem; }
    .pf-rows span { text-align: left; }
    .pf-mosaic { grid-template-columns: 1fr; }
    .pf-mosaic > :first-child { grid-column: auto; }
    .pf-gallery { grid-template-columns: 1fr; gap: 1.25rem; }
    .pf-gallery__item:first-child img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   11. Spacing utilities
   ========================================================================== */
.pf-mt    { margin-top: 1.5rem; }
.pf-mt-lg { margin-top: 2rem; }

/* The charter profile panel sits below WooCommerce's own summary, so it needs
   its own top rule rather than relying on a preceding .pf-section. */
.pf-charter-profile { padding-top: 1rem; }
.pf-charter-profile .pf-section:first-child { border-top: 1px solid var(--pf-line); }
.pf-position {
    display: block;
    margin-top: .3rem;
    font-variant-numeric: tabular-nums;
    font-size: .88rem;
    color: var(--pf-muted);
}

/* ==========================================================================
   12. Menu call to action
   --------------------------------------------------------------------------
   The last menu item is the enquiry, which is the one thing we want a
   corporate visitor to do. Given the class pf-menu-cta by scripts/setup-menu.php.
   ========================================================================== */
@media (min-width: 992px) {
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li.pf-menu-cta > a {
        margin-left: 1rem;
        /* !important because the theme sets padding:10px 0 !important on every
           nav link, which would leave the button with no sides. */
        padding: .62rem 1.3rem !important;
        background: var(--pf-accent);
        border-radius: 2px;
        color: #fff;
        line-height: 1.25;
    }
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li.pf-menu-cta > a:hover {
        background: #fff;
        color: var(--pf-ink);
    }
    /* It is already a button; the current-page underline would be noise. */
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li.pf-menu-cta.current-menu-item > a {
        box-shadow: none;
    }
}

/* ==========================================================================
   13. Footer
   --------------------------------------------------------------------------
   Ireca's footer is a warm grey (#343434) that does not match the dark band
   used in the header and the --tint sections. Same ink everywhere.
   ========================================================================== */
.footer.footer_default {
    background-color: var(--pf-ink-2);
}
.footer.footer_default .footer_copyright {
    background-color: var(--pf-ink);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer.footer_default a:hover {
    color: var(--pf-accent-soft);
}

/* ==========================================================================
   14. Narrow desktop
   --------------------------------------------------------------------------
   Eight items at the theme's 30px right padding each need about 1130px. On a
   1024px screen the nav ran off the right edge. Tightening the gaps between
   992px and 1199px keeps it on one line without dropping to the burger menu.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li > a {
        padding-right: 14px !important;
        font-size: .86rem;
    }
    .ovatheme_header_version3 .ova_menu nav.navbar ul.navbar-nav > li.pf-menu-cta > a {
        margin-left: .4rem;
        padding: .55rem .9rem !important;
    }
    .ovatheme_header_version3 .logo .navbar-brand img { max-height: 40px; }
    .ovatheme_header_version3 .ova_menu nav.navbar { gap: 1rem; }
}


/* ==========================================================================
   12. Charter archive
   --------------------------------------------------------------------------
   WooCommerce lays the loop out with percentage widths and clearfixes on
   .products li.product. The cards are the same component as the home page, so
   give the list the same grid and let the card rules do the rest.
   ========================================================================== */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product.pf-charter-item {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
}
.woocommerce ul.products li.product.pf-charter-item::before { content: none; }

@media (max-width: 900px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 600px) {
    .woocommerce ul.products { grid-template-columns: 1fr; }
}