@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;
}

/* Figma 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 */
/* Figma: 692px band; wordmark ~975px wide from the content edge; line art
   behind its right half; side image 672px tall bleeding 54px off the right. */
/* The theme's header is an 80px transparent overlay (position: absolute), so
   the band runs beneath it. Figma: 692px band below an 81px header -> 772px
   total, content and plate 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;   /* Figma: 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 */
/* Figma: 1360px column. 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 - the design's "Tracey" state: an opaque panel over the photo,
   same head block at the top, biography beneath. Matches 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 */
/* Design confines the panel copy to ~500px; the image overlaps on the right. */
.seafood-venue__panel .seafood-body {
    max-width: 520px;
}

/* ------------------------------------------------------------ CTA band */
/* Shared simple_cta_module, restyled as the full-bleed purple band in the
   design 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;
}