@import url('home-get-in-touch.css');

/**
 * Seafood & Superannuation
 * Template: templates/seafood-superannuation.php
 */

.seafood-section {
    --seafood-navy: #1B214A;
    --seafood-purple: #752963;
    --seafood-gold: #E4AA53;
    --seafood-panel: #F0F6FF;

    font-family: var(--font-Poppins);
    color: var(--seafood-navy);
    padding: 60px 0;
}

/* Content column: 1360px, centred. Container padding is 15px a side. */
.seafood-section > .container {
    max-width: 1390px;
}

.seafood-heading {
    font-size: 40px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--seafood-navy);
    margin: 0 0 24px;
}

.seafood-heading strong {
    font-weight: 600;
}

.seafood-body,
.seafood-body p {
    font-size: 14px;
    line-height: 1.3;
    color: var(--seafood-navy);
}

.seafood-body p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- Hero */
/* Hero band with the wordmark on the left, line art behind its right half,
   and the side image bleeding off the right edge. */
/* The theme's header is an 80px transparent overlay (position: absolute), so
   the band runs beneath it: 772px total, 692px visible below the header,
   content and side image offset by the header height. */
.seafood-hero {
    --header-h: 80px;
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-h) + 80px) 0 94px;
    min-height: min(772px, 40.2vw);
    display: flex;
    align-items: flex-end;   /* content bottom-anchored 94px above the band edge */
}

.seafood-hero .container {
    width: 100%;
}

.seafood-hero__inner {
    display: flex;
    align-items: center;
}

.seafood-hero__content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 70%;
}

@media (min-width: 1440px) {
    .seafood-hero__content {
        margin-left: -60px;
    }
}

.seafood-hero__line-art {
    position: absolute;
    top: 50%;
    left: 36%;
    transform: translateY(-58%);
    width: 72%;
    opacity: 0.9;
    pointer-events: none;
}

.seafood-hero__line-art img {
    display: block;
    width: 100%;
    height: auto;
}

.seafood-hero__wordmark {
    position: relative;
    margin: 0;
    z-index: 1;
}

.seafood-hero__wordmark img {
    display: block;
    width: 100%;
    max-width: 975px;
    height: auto;
}

.seafood-hero__tagline {
    position: relative;
    z-index: 1;
    margin: 18px 0 0 15%;
    font-size: 20px;
    line-height: 1.024;
    color: var(--seafood-navy);
}

/* Bleeds off the section edge, independent of the container.
   Positioned with top/right only - AOS owns `transform` on this element,
   so a translateY() here would be discarded once the entrance completes. */
.seafood-hero__image {
    position: absolute;
    top: calc(var(--header-h) + 4px);
    right: -54px;
    height: calc(100% - var(--header-h) - 20px);
    max-height: 672px;
    width: auto;
    z-index: 0;
}

.seafood-hero__image img {
    display: block;
    height: 100%;
    width: auto;
    filter: drop-shadow(-15px 24px 14px rgba(0, 0, 0, 0.03));
}

/* ---------------------------------------------------------------- Intro */
.seafood-intro__inner {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

.seafood-intro__image {
    flex: 0 0 34%;
}

.seafood-intro__image img {
    display: block;
    width: 100%;
    height: auto;
}

.seafood-intro__content {
    flex: 1 1 auto;
    min-width: 0;
}

.seafood-intro__details {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 28px;
}

/* ---------------------------------------------------------------- Venue */
/* Heading, then a 243px #F0F6FF band with the copy inset 36px/32px at 501px
   wide. The 630x453 image sits 14px in from the band's right edge, starting
   18px above it and hanging 192px below. Logotype runs along the image's top
   edge at full width. */
.seafood-venue__wrap {
    width: 100%;
}

.seafood-venue__heading {
    margin-bottom: 13px;
}

.seafood-venue__inner {
    display: grid;
    grid-template-columns: 1fr 46.3% 14px;   /* 630 / 1360 */
    grid-template-rows: minmax(243px, auto) auto;
}

.seafood-venue__panel {
    grid-column: 1 / -1;
    grid-row: 1;
    background-color: var(--seafood-panel);
    padding: 32px 36px;
    display: block;
}

.seafood-venue__panel .seafood-body {
    max-width: 501px;
}

.seafood-venue__image {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: -18px;
}

.seafood-venue__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 630 / 453;
    object-fit: cover;
}

.seafood-venue__logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.seafood-venue__logo img {
    aspect-ratio: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------- Speakers */
.seafood-speakers__heading {
    max-width: 700px;
    margin-bottom: 50px;
}

.seafood-speakers__featured {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    margin-bottom: 70px;
}

.seafood-speakers__featured-image {
    flex: 0 0 34%;
}

.seafood-speakers__featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

.seafood-speakers__featured-info {
    flex: 1 1 auto;
    min-width: 0;
}

.seafood-speakers__featured-link {
    display: inline-block;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--seafood-navy);
    text-decoration: underline;
}

.seafood-speakers__list {
    --cards-width: min(1570px, calc(100vw - 30px));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    width: var(--cards-width);
    margin-left: calc(50% - var(--cards-width) / 2);
}

.seafood-speaker {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.seafood-speaker__image {
    position: relative;
    flex: 0 0 auto;          /* photo is the fixed part; the name bar absorbs row height */
    aspect-ratio: 510 / 550;
    background-color: #E9EDF4;
    overflow: hidden;
}

/* Absolutely filled: a percentage height won't resolve against an
   aspect-ratio box, which left the photo natural-height and clipped from
   the top. This gives a true centred cover crop. */
.seafood-speaker__image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.seafood-speaker__body {
    flex: 1 1 auto;
    background-color: var(--seafood-panel);
    padding: 20px 22px;
    min-height: 100px;
}

.seafood-speaker__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.seafood-speaker__name {
    font-size: 23px;
    line-height: 1.48;
    color: var(--seafood-purple);
}

.seafood-speaker__position {
    font-size: 13px;
    line-height: 1.38;
    text-transform: uppercase;
    color: var(--seafood-navy);
}

.seafood-speaker__linkedin a {
    display: block;
    line-height: 0;
}

.seafood-speaker__linkedin svg {
    width: 26px;
    height: 26px;
}

/* Hover panel: an opaque panel over the photo with the same head block at the
   top and the biography beneath. Uses the team module's ease-in-out crossfade. Focusable so keyboard and touch users can reach it. */
.seafood-speaker__overlay {
    position: absolute;
    inset: 0;
    padding: 22px;
    background-color: var(--seafood-panel);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease-in-out, transform .45s ease-in-out;
    pointer-events: none;
    overflow: auto;
}

.seafood-speaker:hover .seafood-speaker__overlay,
.seafood-speaker:focus .seafood-speaker__overlay,
.seafood-speaker:focus-within .seafood-speaker__overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.seafood-speaker__overlay .seafood-speaker__head {
    margin-bottom: 18px;
}

.seafood-speaker__bio,
.seafood-speaker__bio p {
    font-size: 12px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .seafood-speaker__overlay {
        transform: none;
        transition: opacity .2s linear;
    }
}

/* --------------------------------------------------------- Breakpoints */
@media (max-width: 1024px) {
    .seafood-heading {
        font-size: 30px;
    }

    .seafood-intro__inner,
    .seafood-speakers__featured {
        flex-direction: column;
        gap: 30px;
    }

    /* Hero: same composition as desktop - wordmark left, plate bleeding off
       the right - just shorter. The plate is a portrait image, so it is
       sized by height (420px -> ~238px wide), never by width. */
    .seafood-hero {
        padding: calc(var(--header-h) + 40px) 0 50px;
        min-height: calc(var(--header-h) + 440px);
        align-items: center;
    }

    .seafood-hero__content {
        max-width: 60%;
    }

    .seafood-hero__line-art {
        display: none;
    }

    .seafood-hero__tagline {
        margin-left: 0;
        font-size: 16px;
    }

    .seafood-hero__image {
        top: calc(var(--header-h) + 10px);
        right: -40px;
        height: calc(100% - var(--header-h) - 20px);
        max-height: 420px;
    }

    .seafood-intro__image,
    .seafood-speakers__featured-image {
        flex-basis: auto;
        width: 100%;
        max-width: 463px;
        margin: 0 auto;
    }

    .seafood-venue__inner {
        display: block;
    }

    .seafood-venue__image {
        margin: 0;
        width: 100%;
    }

    .seafood-speakers__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin-left: 0;
    }

    .seafood-speaker {
        flex: 0 1 calc(50% - 10px);
        max-width: 510px;
    }

    .page-template-seafood-superannuation .get-in-touch-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 0 !important;
    }

    .page-template-seafood-superannuation .get-in-touch-content {
        padding: 0 15px !important;
    }

    .page-template-seafood-superannuation .get-in-touch-container .content {
        display: block;
        width: 100%;
    }

    .page-template-seafood-superannuation .get-in-touch-container .column-1,
    .page-template-seafood-superannuation .get-in-touch-container .column-2 {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .page-template-seafood-superannuation .get-in-touch-container .column-2 {
        padding-top: 16px;
    }

    .page-template-seafood-superannuation .get-in-touch-container .title-section {
        font-size: 30px;
        max-width: none;
        width: 100%;
    }

    .page-template-seafood-superannuation .get-in-touch-container .btn-wrapper {
        width: auto;
        max-width: none;
        margin: 24px 0 0;
    }
}

@media (max-width: 767px) {
    .seafood-section {
        padding: 40px 0;
    }

    .seafood-hero {
        padding-top: calc(var(--header-h) + 40px);
    }

    .seafood-heading {
        font-size: 26px;
    }

    .seafood-intro__details {
        font-size: 18px;
    }

    .seafood-hero {
        display: block;
        min-height: 0;
        padding: calc(var(--header-h) + 30px) 0 16px;
    }

    .seafood-hero__inner {
        display: block;
    }

    .seafood-hero__content {
        max-width: 100%;
    }

    .seafood-hero__tagline {
        font-size: 15px;
        margin-top: 12px;
    }

    .seafood-hero__image {
        position: relative;
        top: auto;
        right: auto;
        height: 240px;
        max-height: none;
        width: fit-content;
        margin: 16px -40px 0 auto;
    }

    .seafood-speaker {
        flex-basis: 100%;
    }

    .page-template-seafood-superannuation .get-in-touch-container .title-section {
        font-size: 26px;
    }
}

/* ---------------------------------------------------- Venue copy width */
/* Panel copy is capped at ~500px; the image overlaps on the right. */
.seafood-venue__panel .seafood-body {
    max-width: 520px;
}

/* ------------------------------------------------------------ CTA band */
/* Shared simple_cta_module, restyled as a full-bleed purple band instead of
   the homepage's pale-blue panel + button block. */
.page-template-seafood-superannuation .section-get-in-touch {
    background-color: #752963;
    padding: 60px 0;
}

.page-template-seafood-superannuation .get-in-touch-container {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.page-template-seafood-superannuation .get-in-touch-container .column-1 {
    max-width: none;
    padding: 0;
}

.page-template-seafood-superannuation .get-in-touch-container .column-2 .description {
    margin-bottom: 0;
    max-width: 600px;
}

.page-template-seafood-superannuation .get-in-touch-container .title-section,
.page-template-seafood-superannuation .get-in-touch-container .title-section p,
.page-template-seafood-superannuation .get-in-touch-container .sub-title,
.page-template-seafood-superannuation .get-in-touch-container .column-2,
.page-template-seafood-superannuation .get-in-touch-container .description,
.page-template-seafood-superannuation .get-in-touch-container .description p {
    color: #ffffff;
}

.page-template-seafood-superannuation .get-in-touch-container .title-section {
    font-size: 40px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

.page-template-seafood-superannuation .get-in-touch-container .column-3,
.page-template-seafood-superannuation .get-in-touch-container .column-3:hover {
    height: auto;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button,
.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button:hover {
    position: relative;
    height: auto;
    width: auto;
    max-width: 100%;
    padding: 0;
    background: none;
    background-image: none;
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 18px;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button:before,
.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button:after {
    display: none;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button span.text {
    margin: 0;
    max-width: 185px;
    font-size: 24px;
    line-height: 1.3;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button span.icon,
.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button span.icon svg {
    position: static !important;
    margin: 0;
    display: block;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button span.icon svg {
    width: 42px;
    height: 42px;
    color: #ffffff;
    transform: none;
}

.page-template-seafood-superannuation .get-in-touch-container .box-type.box-button:hover span.icon svg {
    color: #E4AA53;
}